Home / Questions / 41467
Accepted
Sergio Romero
Asked: 2020-12-29 20:48:07 +0800 CST 2020-12-29 20:48:07 +0800 CST

反应和 setState 的问题（异步）

  • 772

我对 React js 和文档中的 setState 有疑问，它说它是异步的。我遇到的问题是我正在使用 Select 并且根据我选择的值，它使用 ajax 向数据库发出请求，但是由于它是异步的，因此在第一次单击选项时不会发送该值, 但直到下一个。单击任何选项。

如何发送更新的值？我已经看到 setState 可以接受第二个参数，即 callBack 但我不确定如何更新该值。

       class HttpPeticion extends React.Component{
  constructor(props){
   super(props);
   this.state={lista:[],
              showData:false,showNodata:false,
              cantidadResultados:'',
              errorTipo:'',errorBool:false
            };
    }

 handlerData(data){

   if (typeof data=="undefined") return 0;

  let errorTipo=data.tipo;
  let errorBool=data.error;

  if(errorBool){
     this.setState({errorBool:data.error})
     this.setState({errorTipo:data.tipo})
  }
  else{
    let recordSize= data.records.length;
      if(recordSize<= 0) {
         this.setState({showData:false})//ocular resultados
         this.setState({showNodata:true})//muestra "no hay datos"
       }else{
        this.setState({showData:true});//mostrar resultados
        this.setState({showNodata:false})//ocultar "no hay datas"
        this.setState({lista:data.records});
      }
    this.setState({cantidadResultados:recordSize + ' Coincidencias' });
 }

 }


    componentWillReceiveProps(){
    axios.post(this.props.urlServer,{'tipo':this.props.tipo,'nombre':this.props.nombre})
      .then(res => {
         this.handlerData(res.data.data);
      })
      .catch(function (error) {
         console.log(error);
      });
}


render(){
  return (
      <div>
         <div>{this.state.cantidadResultados}  </div>
         <div className={this.state.showData ? '': 'hidden' }>
            <ResultadoBusqueda datos={this.state.lista} />
          </div>

           <div className={this.state.showNodata ? '' : 'hidden'}>
             <h1>No hay ningun resultado </h1>
           </div>

           <div className={this.state.errorBool ? '':'hidden'}>
                <p>Un error ha ocurrido conectado con el ser servidor intente refresar la pagina(f5), si el problema
                     persiste contacte con el administrador.<a href="#">Mas informacion</a>  </p>
                <small>{this.state.errorTipo}</small>
           </div>
      </div>
  );
}
}

class ResultadoBusqueda extends React.Component{
    render(){
       return(
           <table>
              <thead>
                 <tr>
                  <th>Cuenta</th>
                  <th>Nombre</th>
                  <th>Precio</th>
                 </tr>
               </thead>
             <tbody>
            {
                 this.props.datos.map((item)=>{
                    return(
                       <tr key={item.cuenta.toString()}>
                       <td>{item.cuenta} </td>
                       <td>{item.nombre}</td>
                       </tr>
                    )
                 })
                }
            </tbody>
            </table>
      );
    }

}

class BusquedaAlumno extends React.Component {
setField (e) {
   //this.checkInput(e.target.value);
  this.setState({[e.target.name]: e.target.value})
}

render() {
   return (
      <div>

      <input type="text"
        onChange={(e)=>this.setField(e)}
        onKeyUp={(e)=>this.setField(e)}
        name="valor1"
       />
       <select onChange={(e)=>this.setField(e)} value={this.state.value} name="combo">
        <option value="-1">Selecciones</option>
         <option value="1">1</option>
         <option value="0">0</option>
       </select>

             <div>{this.state.valor1}</div>
              <div>{this.state.combo}</div>
         <HttpPeticion tipo={this.state.combo} nombre={this.state.valor1} urlServer={"http://localhost/viaLacteaQueryBusquedaId.php"} />
       </div>
    );
  }

如果它向我显示数据，但它对选择和文本框有一点不便

javascript

3 Answers

  1. Best Answer

    您必须意识到，如果在您的开发中没有加起来，那么您基本上是在做错事。您还有一组正在执行的不良做法：

    • HttpRequest：一个不可见的组件？我想你只是用这个组件向服务器发出请求，如果是这样的话！糟糕！。您应该将此组件创建为仅处理请求并简化 url 使用的服务。
    • 你先设置值然后发出请求是没有意义的，首先你必须发出请求然后根据响应设置选择的值或不设置
    • 使用字符串作为属性，反之亦然e.target.name，为状态或变量中name="valor1"的属性建立单个值name
    • 隔离动作以使您的代码具有可扩展性，将事件与from 分开input，select您永远不知道何时需要对事件应用更多逻辑

    总结您的问题以及我给您的原因，我会根据您的需要或多或少地以这种方式编写您的组件

    import HttpPeticion from 'services/HttpPeticion';

class BusquedaAlumno extends React.Component {
  componentWillMount() {
    this.setState({
      selectValue: '',
      inputValue: '',
    });
  }

  onInputChange() {
    this.setState({
      inputValue: e.target.value
    });
  }

  onSelectChange(e) {
    HttpPeticion.get('http://localhost/viaLacteaQueryBusquedaId.php', (data) => {
      this.setState({
        selectValue: e.target.value
        data: data
      });
    });
  }


  render() {
    const { inputValue, selectValue } = this.state;

    return (
      <div>
        <input type="text" onChange={this.onInputChange} value={inputValue} />

        <select onChange={this.onSelectChange} value={selectValue} >
          <option value="-1">Selecciones</option>
          <option value="1">1</option>
          <option value="0">0</option>
        </select>

        <div>{inputValue}</div>
        <div>{selectValue}</div>
       </div>
    );
  }
}
    • 2

  2. setState类方法Component接受回调作为第二个参数，当状态已经更新时要执行。

    this.setState({ [e.target.name]: e.target.value }, () => {
  // estado actualizado, hacer algo
});

    在回调中，您可以放置​​任何取决于更新该状态条目是否成功的逻辑。

    • 1

  3. 除了@JoseAPL 的建议之外，更新状态的处理程序中存在问题，对于每个更新状态的输入或选择，您并没有真正更新状态，您正在通过这样做完全替换它。

    setField (e) {
    this.setState({[e.target.name]: e.target.value})
}

    您正在替换所有状态并仅保留当时更新的字段，消除先前的字段，解决方案是使用 React 的Immutability Helpers。

    首先导入库

    import update from 'react-addons-update'

    然后像这样定义你的处理程序。

    setField (e) {
    this.setState(update(
        this.state,
        {[e.target.name]: {$set: e.target.value}}
    ))
}

    作为一种好的做法，始终使用 Immutability Helpers 来改变状态。

    • 1