React Hooks - 使用沒有事件處理程序的道具更新 state

Question

我對 React 比較陌生，這就是我想要完成的：

1. 用戶從側邊欄中選擇一個項目。
2. elementID 被提升到父級（app.js）。
3. app.js 將其發送給它的子節點 Graphs。
4. Graphs 將創建一個 Graph 組件和 append 到它的graph數組。

還有比這更好的方法嗎？ PS 我將在這個組件中擁有超過 1 倍的useEffect 。

App.js
 - Sidebar
 - Title-bar
 - Graphs

function Graphs(props) {
  const [graphs, addGraphs] = useState([]);

  useEffect(() => {
    if (props.graphID) {
      addGraphs(graphs.concat(props.graphID));
    }
  }, [props.graphID]);

  return (
    <div>{graphs}</div>
  );
}

謝謝！

Answer 1

我相信這是一個好方法，但您應該使用功能性 state 更新。 React.useState鈎子的“setter”函數與之前的 state 有一個回調，所以你應該像這樣更新它：

import React from "react";

function MyComponent({id}) {
  const [list, setList] = React.useState([]);

  React.useEffect(() => {
    if (id) {
      setList(previousState => {
         return [
             ...previousState,
             id
         ];
      });
    }
  }, [id]);

  return (
    <div>
        {
            list.map((_id, index) => {
                <p key={index}>
                    {_id.toString()}
                </p>
            )
         }
    </div>
  );
}

Answer 2

像喬納森那樣發送道具沒有任何問題。

如果您正在尋找其他 state 管理選項，您可以查看本機 React useContext ， useReducer掛鈎來創建您自己的系統。 否則有像Redux Saga這樣的框架，最近Recoil值得一試。

如果您只是想 select 一個 ID 並將其發送到另一個組件，那么使用props或useContext可能是您最好的選擇。