自定义Hook内数据更新时，使用该Hook的组件未重渲染问题

自定义Hook useFilters 内部更新数据后，使用该Hook的组件未触发重渲染。具体表现为：useFilters 中的useEffect会在selectedCategories状态更新时正常执行，调用API获取数据并更新feedback状态，但消费feedback的Inbox组件没有重渲染。

useFilters 代码 #

export function useFilters() {
  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
  const [feedback, setFeedback] = useState<any>([]);

  useEffect(() => {
    const fetch = async () => {
      // 从API获取数据
      setFeedback(data || []);
    };

    fetch();
  }, [selectedCategories]);

  return {
    setSelectedCategories,
    feedback,
  };
}

Inbox 组件代码 #

export default function Inbox() {
  const { feedback } = useFilters();

  return (
    <Container>
      {feedback.map((id: number) => (
        <Link href={`/feedback/${id}`}>
          <InboxItem feedbackId={id} key={id}/>
        </Link>
      ))}
    </Container>
  );
}

已尝试的无效方法：在useEffect中用扩展运算符创建新数组触发重渲染

setSelectedCategories([...data])

排查与解决步骤 #

1. 验证API返回数据是否实际变化 #

在fetch函数内打印data和当前feedback状态，确认每次selectedCategories更新时，API返回的数据是否与现有feedback存在差异。如果数据完全一致，React会判定状态未变更，跳过重渲染。

2. 强制创建新数组更新状态 #

即使API返回的数组内容相同，若引用未变，React会认为状态未更新。可以通过创建新数组实例来触发重渲染：

setFeedback([...(data || [])]);
// 或使用 Array.from
setFeedback(Array.from(data || []));

3. 确保Hook的正确调用时机 #

检查Inbox组件中useFilters的调用位置，必须在组件顶层调用，不能放在循环、条件判断或嵌套函数内，否则会导致每次渲染都创建新的Hook实例，状态无法共享或正确更新。

4. 确认useEffect触发与状态更新逻辑 #

在useEffect内添加日志，确认selectedCategories更新时是否确实触发了API请求。同时检查setSelectedCategories的调用是否传递了全新的数组引用（你之前的思路正确，但要确保data是有效的新数据）。

5. 优化类型标注（可选） #

将feedback的any类型替换为具体的接口类型，避免因类型模糊导致的潜在渲染问题：

interface FeedbackItem {
  id: number;
  // 补充其他字段定义
}
const [feedback, setFeedback] = useState<FeedbackItem[]>([]);

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