javascript - 将 useState setter 传递给 child 以更新 parent 状态是否正确？

Question

我们可以将回调作为 Prop 传递给 child 并更新状态，但我只是想知道我可以将 useState setter 传递给 child 并直接在 child 中调用它来更新 parent 状态吗？
就像是:

function Parent(){
  const [data, setData] = useState();
  
  return(
    <Child setData={setData}/>
  );
}

function Child({setData}){
  useEffect(()=>{
    setData('new data'); //Calling setter here to update
  }, [])
}

Answer 1

是的，你可以这么做。事实上，这样做是个好习惯。为避免不必要的重新渲染和无限循环，请包含 setData在 Child 的 useEffect 的依赖数组中或包装data在 useCallback在父组件中。此外，建议在使用 useState 时将数据初始化为某个初始值。 .在您的情况下，我会将其初始化为 null -> const [data, setData] = useState(null)依赖数组的示例:

function Child({ setData }) {
  useEffect(() => {
    setData("new data"); //Calling setter here to update
  }, [setData]);

  return (...);
}

如果你想将它传递给一个多层次的 child ，我建议使用 Context.有了上下文，您就可以使用 useState在任何 child 中，您不需要将它作为 Prop 传递给 Parent 之间的所有 child 。和 Child你想用它。
上下文示例:

// Step 1. Create context
const MyContext = React.createContext();

// Step 2. Create a custom hook that will return Context
// This will allow you to use the context in any number of children more easily.
// And it will also make sure that it is only used within Parent component
const useData = () => {
  const context = React.useContext(MyContext);

  if (!context) {
    throw new Error("useData must be used within a <Parent />");
  }

  return context;
};

function Parent() {
  const [data, setData] = useState(null);
  const value = [data, setData];

  // Step 3. Use Context Provider and pass the value of the props that
  // need to be used by any children down the tree
  return (
    <MyContext.Provider value={value}>
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  return <ChildTwo />;
}

function ChildTwo() {
  // Step 4. Extract the prop from the Context that you need using custom hook
  const [data, setData] = useData();

  useEffect(() => {
    setData("new data"); //Calling setter here to update
  }, [setData]);

  return (...);
}