如何在 React 类组件中保存编辑的数据？答案

【问题标题】：How to save edited data in React class components?如何在 React 类组件中保存编辑的数据？
【发布时间】：2022-12-18 14:15:17
【问题描述】：

在 React 项目中，我有具有编辑功能的记录列表。使用编辑功能，我可以编辑数据，但无法保存。我也提到了很多帖子，但无法找到合适的解决方案。请参考下面的代码。

handleChange = (event) => {
    let fieldName = event.target.name;
    let value = event.target.value;
    this.setState({
      inputFields: {
        ...this.state.inputFields,
        [fieldName]: value
      }
    });
  };

handleSave = () => {
    const { fullName, emailAddress, state } = this.state.inputFields;
    this.setState({
      inputFields: {
        ...this.state.inputFields
      }
    });

    console.log("EDIT SAVE DATA", this.state.inputFields);

    this.props.closeModal();
  };

正如您从上面的代码中看到的那样，在handleSave() 中保存数据以获取console 中的数据，但没有在 UI 上更新

可能缺少什么？高度赞赏任何建议或更改。

请参考codesandbox链接--> https://codesandbox.io/s/material-demo-forked-pvyul5?file=/modal.js:485-991

【问题讨论】：

你总是在 NewData.js 的 render() 中显示 allData。并且您正在传递 SimpleModal SimpleModal 中选定的新数据。因此，无论您更改什么，都会发生在SimpleModal 内部，对 NewData.js 的 render() 中的 allData 没有影响。
感谢您的回复。如果您不介意，请更新codeandbox

标签： javascript reactjs

【解决方案1】：

setState 是异步的。您需要将控制台日志放在setState 的回调中，以确保状态已更新。此外，当您需要当前状态值来更新状态时，请始终使用 setState 的 prevState 参数。

handleSave = () => {
  const { fullName, emailAddress, state } = this.state.inputFields;
  this.setState(prevState => ({
    inputFields: {
      ...prevState.inputFields
    }
  }), () => {
    console.log("EDIT SAVE DATA", this.state.inputFields);
  });
  this.props.closeModal();
};

【讨论】：

感谢您的回复，但是，这里的 UI 没有使用更改后的数据进行更新