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堆栈溢出文章讨论了原因。请尝试以下操作：

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

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

重置数组并重新渲染组件

1 个答案: