React Hooks能否向子组件传递状态？代码场景下的疑问

首先直接给你答案：在你当前的代码里，子组件只能访问到searchData，但完全拿不到setSearchData——因为你没有把setSearchData作为props传递给它们。

为什么会这样？React Hooks的状态传递逻辑 #

React遵循单向数据流原则，父组件里通过useState创建的状态和状态更新函数，都是该父组件的局部变量。子组件默认无法直接访问父组件的局部变量，必须通过显式的props传递，子组件才能拿到这些值。

看你代码里的传递情况：

• 你给SearchBarContainer传递了searchData这个props，但没传setSearchData，所以这个子组件只能读取searchData，没法修改它；
• 同样，你给PostContainer也只传了searchData，没传setSearchData，所以它也只能读取，不能触发searchData的更新。

如果需要子组件修改searchData，该怎么做？ #

如果你希望子组件能更新searchData，只需要把setSearchData也作为props传递过去就行。比如修改你的组件调用代码：

// 给SearchBarContainer传递状态更新函数
<SearchBarContainer 
  data={props.data} 
  searchData={searchData} 
  setSearchData={setSearchData} 
/>

// 给PostContainer也传递状态更新函数
<PostContainer 
  data={dataOnMap} 
  addLike={addLike[index]} 
  searchData={searchData} 
  setSearchData={setSearchData} 
/>

这样子组件就能通过调用props.setSearchData(新的值)来更新父组件的searchData状态了，这是React父子组件间状态通信的常规方式。

顺便提个代码小优化 #

你的useEffect没有设置依赖数组，这会导致每次组件渲染时都会执行这个effect，可能引发不必要的重渲染。建议加上依赖项[props.data]，这样只有当props.data变化时才会更新addLike：

useEffect(() => {
  setAddLike({ addLike: Array(props.data.length).fill(false) });
}, [props.data]);

内容的提问来源于stack exchange，提问作者Bradley Ball