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

Question

我正在构建一个 React 应用程序。 我没有后端服务器。 相反，我用一个叫做文件上传.json securities.json作为后端服务器。 .json 文件列出了每种证券的证券和价格表。

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

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

Answer 1

两种解决方案：

1. 使用 Redux： https : //react-redux.js.org/

2. 使用 reacts 上下文系统： 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来设置道具更改时的状态。