Question

我正在构建一个React App。我没有后端服务器。相反，我使用一个名为securities.json的.json文件作为后端服务器。 .json文件列出了每种证券中的证券和价格清单。

我试图做的是将更新的价格列表从其子组件提交到App.js（父组件）上的Securities.json。我注意到，当我在“价格弹出”窗口中添加新价格然后将其关闭时，再次检查了“价格弹出”窗口。我输入的新价格消失了。我不知道如何解决。我正按照一位开发人员的建议将其传递给App.js。

有人可以看看我在CodeSandBox中的代码吗？ https://codesandbox.io/s/github/kikidesignnet/caissa

Answer 1

两种解决方案：

使用Redux：https://react-redux.js.org/
使用反应上下文系统：https://reactjs.org/docs/context.html

您还可以将更新功能作为道具传递给子组件，以更新父组件的状态。

Answer 2

我的猜测是价格表是在构造函数中设置的。那里的状态是由道具设定的。在更改道具时，价目表状态不会更新，因为在仅执行一次的构造函数中会发生设置状态。当道具发生变更时，您需要更新状态。

这是我正在谈论的代码

  constructor(props) {
    super(props);

    this.state = {
      priceArr: this.props.pricelist,
      // newPriceArr: this.props.updatePrice,
      showPricePopup: false,
      addPricePopup: false,
      isToggleOn: true,
      date: props.date || "",
      number: props.number || ""
    };
  }

道具更改时，您可能需要使用getDerivedStateFromProps来设置状态。

反应如何从子组件更新App.js中的数据

2 个答案: