React Js：从对象数组中更新一项

Question

in my database i have opening Time table where i have shifts of each day in the week, when i try to modify the opening time of one day ,opening Time of others day they are deleted

---

this my code to update my state data

 async handleChange(e) {
    const target = e.target;
    const name = target.name;
    const value = target.value;


   await this.setState({
      opening_time: {
        ...this.state.opening_time,

        [this.state.day]: [['1', name == '0' ? value : this.state.opening_time[this.state.day][0][1], name == '1' ? value : this.state.opening_time[this.state.day][0][2]],(name == '2' || name == '3')? ['1', name == '2' ? value : this.state.opening_time[this.state.day][1][1], name == '3' ? value : this.state.opening_time[this.state.day][1][2]]:['0']]


      }
    });

    this.props.setData({ opening_time: JSON.stringify(this.state.opening_time) })



  }

  setData(data) {
    this.setState({ data: { ...this.state.data, ...data } })

  async send() {
    console.log(this.state.data)
    await callApi('post/' + this.state.id, this.state.data, 'PUT') .then(res=>{console.log(res,"yrt")
    }).catch(error=>{ this.setState({visible: "echec"})})



  }

this is my opening Time format

{"Mon":[["1", "08:00", "12:15"],["1", "14:14", "23:23"]],"Tue":[["0"],["0"]],"Wed":[["0"],["0"]],"Thu":[["0"],["0"]],"Fri":[["0"],["0"]],"Sat":[["0"],["0"]],"Sun":[["0"],["0"]]}

can somebody help me ! thanks

Answer 1

Use the previous state to update state instead directly using this.state inside the state. refer React documentation State Updates May Be Asynchronous

in your code, you can rewrite the code like below

this.setState(prevState => ({
      opening_time: {
        ...prevState.opening_time,

        [prevState.day]: [['1', name == '0' ? value : prevState.opening_time[prevState.day][0][1], name == '1' ? value : prevState.opening_time[prevState.day][0][2]],(name == '2' || name == '3')? ['1', name == '2' ? value : prevState.opening_time[prevState.day][1][1], name == '3' ? value : prevState.opening_time[prevState.day][1][2]]:['0']]


      }
    }));

 setData(data) {
    this.setState(prevState => ({ data: { ...prevState.data, ...data } })_