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來設置道具更改時的狀態。