重置数组并重新渲染组件

Question

我有一个用来显示组件的数组。该组件内部有一个下拉菜单。此下拉列表在更改时，它们的值将存储在主数组中设置的新数组中。还有一个重置按钮，可以将状态重置回之前的状态，并且应该重新渲染显示在选择任何内容之前的数据的组件。

当我在更改下拉列表后单击重置时，它应该重置为页面加载时的状态。例如：完全访问 代码如下：

class EditView extends Component {
  state = {
    accessData: [],
    toBeDeleted: -1
  };

  componentDidMount() {
    this.setState({ accessData: this.props.accData });
  }

  resetData = () => {
    this.setState({ accessData: this.props.accData })
  };

  handleChange(value, index) {
    let dataArr = this.state.accessData;
    dataArr[index].relation = value;
    this.setState({
      accessData: dataArr
    });
  }

  postData = () => {
    const metaData ={
      method: 'POST',
      url: 'some API URL',
      page: 'page',
      data: this.state.accessData
    }
    this.props.dataSuccess(metaData); //makes a POST api call
  }

  render() {
    const { accessData } = this.state;
    return (
      <>
        {accessData.map((item, index) => (
          <div>
            <DataHeading>Relation: </DataHeading>
            <Select
               defaultValue={item.relation}
               onSelect={e => this.handleChange(e, index)}
            >
              <Option value="married">Married</Option>
              <Option value="partners">Partners</Option>
              <Option value="siblings">Siblings</Option>
            </Select>
          </div>
        ))}

        <ResetButton onClick={this.resetData}>Reset</ResetButton>
        <UpdateButton onClick={this.postData}>Update</UpdateButton>
      </>

问题是状态正在重置但未反映在组件中。请帮帮我。我需要一个快速的解决方案。提前致谢。

Answer 1

你不应该改变现有的数组，而应该分配一个新的数组，this Stack overflow 帖子讨论了原因。请尝试以下操作：

resetData = () => {
  this.setState({ accessData: [..this.props.accData] })
};

handleChange(value, index) {
  let dataArr = [...this.state.accessData];
  dataArr[index].relation = value;
  this.setState({
    accessData: dataArr
  });
}