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

Problem with reacts and setState (asynchronous)

  • 772

I have a problem with react js and with setState in the documentation it says that it is asynchronous. And the problem I have is that I am using a Select and depending on the value that I select, it makes the request with ajax to the database, but since it is asynchronous, the value is not sent when clicking on an option the first time, but until the next. click on any option.

How do I send the updated value? I've seen that setState can take a second argument which is a callBack but I'm not sure how to update the value.

       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>
    );
  }

If it shows me the data but it has that little inconvenience with the select and the textbox

javascript

3 Answers

  1. Best Answer

    You have to realize that if something doesn't add up in your development, you're basically doing something wrong. You also have a set of bad practices that you are carrying out:

    • HttpRequest: an invisible component? I suppose that you are only making the requests to the server with this component, if so! Bad!. You should create this component as a service that only handles requests and simplify the use of urls.
    • It does not make sense that you first set values ​​and then make the request, First you have to make the request and then according to the response make the chosen value set or not
    • Use string as property and vice versa e.target.nameand name="valor1", establishes a single value for what will be the attribute nameeither in the state or by variables
    • Isolate actions so that your code is scalable, separate events from inputthe from, selectyou'll never know when you need to apply more logic to your events

    In conclusion to your question and for the reasons that I have given you, I would write your component in this way more or less depending on your needs

    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. setStateThe class method Componentaccepts a callback as a second parameter to be executed when the state has already been updated .

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

    In the callback you can put any logic that depends on the success of updating that state entry.

    • 1

  3. In addition to @JoseAPL's recommendations, there is a problem in the handler that updates the state, for each input or select that updates the state you are not really updating the state, you are replacing it completely so by doing this.

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

    you are replacing all the state and leaving it only with the field that is updated at that moment, eliminating the previous field, the solution is to use React's Immutability Helpers .

    First import the library

    import update from 'react-addons-update'

    Then define your handler like this.

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

    As a good practice, always use Immutability Helpers to mutate the state.

    • 1