0

I want to remove data once the clear button is clicked. so for that i have set the state with empty array using data:[] . when i console log it, it gives me an empty array which means the state is updating. but the moment it goes here this.props.form.setFieldsValue line. the state is again updating with the old values (props values). if anyone know how to fix this please tell. thanks

Clear = async () => {
       await this.setState({
            textOne: 0,
            texttwo: 0,
            textthree: 0,
            data:[]
        });

        this.props.form.setFieldsValue({
            number_field_one: '',
        });

    }

<div style={{ width: "100%", marginTop: "3%", marginBottom: "1%" }}>
  <span>
    {getFieldDecorator("number_field_one", {})(
      <Select
        onChange={e => {
          this.setState({ ID: e });
        }}
        filterOption={(input, option) =>
          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
      >
        {Options}
      </Select>
    )}
  </span>

  {this.state.data ? (
    <div
      style={{ float: "right", width: "30%", height: 280, overflowY: "scroll" }}
    >
      <List
        loading={this.props.loading}
        size="small"
        bordered
        dataSource={this.state.data}
        renderItem={item => <List.Item>{item}</List.Item>}
      />
    </div>
  ) : (
    <div
      style={{ float: "right", width: "30%", height: 280, overflowY: "scroll" }}
    >
      <List
        loading={this.props.loading}
        size="small"
        bordered
        dataSource={data}
        renderItem={item => <List.Item>{item}</List.Item>}
      />
    </div>
  )}
</div>
 <Button onClick={this.Clear} type="danger" >Clear</Button>
123t
  • 77
  • 1
  • 10
  • Are you using Formik? can you paste the full code here? – Muhammad Haseeb Mar 23 '20 at 11:07
  • Can you remove async-await in your Clear function? It is not required. That is not allowing to do setState immediately. – Nayan shah Mar 23 '20 at 11:09
  • @Nayanshah i used it because the setState doesn't update the state immediately. – 123t Mar 23 '20 at 11:12
  • @123t - setState updates the state immediately, and based on state change, the dependent component lifecycle changes as well. So if you do async-await, then your react component lifecycle will not work properly and the state will not be updated timely, that's why you are seeing old state instead of empty array(new state). – Nayan shah Mar 23 '20 at 11:15
  • okay i removed it but i have still got the same issue . and when i console log the this.state.data it shows undefined so that means my state is not updating ! why is that ? – 123t Mar 23 '20 at 11:23
  • @Nayanshah i used that async according to this https://stackoverflow.com/questions/41278385/setstate-doesnt-update-the-state-immediately is it a bad practise ? – 123t Mar 23 '20 at 11:26
  • In most cases, setState will work fine without callback functions. – glinda93 Mar 23 '20 at 11:28
  • @bravemaster so that means is it okay to use async there ? – 123t Mar 23 '20 at 11:29
  • @MuhammadHaseeb my code is too long – 123t Mar 23 '20 at 11:30
  • Can you just paste that file? i mean the code above that clear function? – Muhammad Haseeb Mar 23 '20 at 13:10
  • @MuhammadHaseeb i have updated the code ! you want to see the function, above the clear function right ? – 123t Mar 24 '20 at 11:35
  • Would be convenient for all of us if you can paste the full code or create a minimal example in codesandbox – Muhammad Haseeb Mar 24 '20 at 11:37

0 Answers0