React中如何跨组件传递自定义Hook返回的状态值

问题原因 #

你当前将useSearch钩子放在ReviewSearchBar组件内部调用，钩子返回的filteredResults是ReviewSearchBar的内部私有状态，平级的Reviews组件无法直接跨组件访问这个值。React中平级组件共享状态的标准方案是状态提升：把共享状态放到两个组件共同的最近父组件中管理，再通过props分别下发给需要的子组件。

具体实现步骤 #

1. 修改影评页面父组件 #

在承载单部电影所有内容的父页面组件中调用useSearch钩子，持有搜索相关的所有状态，再将对应状态分别传递给搜索栏和影评列表组件：

// 单部电影的影评页面父组件
export const MovieReviewPage = ({ reviews }) => {
  // 将useSearch调用移到父组件，拿到所有返回值，包括需要的filteredResults
  const { onChange, textValue, filteredResults } = useSearch({ reviews })

  return (
    <div>
      {/* 给搜索栏传入输入框需要的回调和绑定值 */}
      <ReviewSearchBar 
        onChange={onChange}
        textValue={textValue}
      />
      {/* 把过滤后的结果传给Reviews组件，替换原始全量reviews传参 */}
      <Reviews reviews={filteredResults} />
    </div>
  )
}

2. 调整ReviewSearchBar组件 #

移除组件内部对useSearch的调用，改为从props接收父组件下发的输入框绑定值和变更回调：

export const ReviewSearchBar = ({ onChange, textValue }) => {
  return (
    <div>
      <input
        placeholder="搜索影评"
        onChange={onChange}
        value={textValue}
      />
    </div>
  )
}

3. Reviews组件无需改动 #

你原有实现的Reviews组件逻辑可以直接复用，只要父组件传入的reviews是过滤后的filteredResults，列表就会自动跟随搜索关键词更新渲染。

可选优化点 #

• 列表渲染不建议用数组下标i作为key，如果影评数据有后端返回的唯一id，建议用review.id作为key值，避免列表动态更新时出现渲染异常：

  export const Reviews = ({ reviews }) => (
    <div>
          {reviews.map((review) => (
            <div key={review.id}>{review.content}</div>
          ))}
    </div>
  )
  

• 可增加搜索空状态判断，当filteredResults.length === 0时展示「暂无匹配的影评」提示，提升交互体验。

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