求助：React组件调用Context API函数引发无限重渲染循环

问题根源 #

调用listLinkedIdeas后会更新linkedIdeas状态，触发组件重渲染；若useEffect依赖配置错误，会导致每次linkedIdeas更新后重复执行数据请求，形成循环。此外，handleListLinkedIdeas的依赖项使用整个idea对象（引用类型），易导致回调函数频繁重建，间接引发不必要的渲染。

修复步骤 #

1. 修正handleListLinkedIdeas的依赖项 #

将依赖从整个idea对象改为idea.id（值类型，引用稳定），避免因父组件传递新的idea对象导致回调频繁重建：

const handleListLinkedIdeas = useCallback(async (): Promise<void> => {
  await listLinkedIdeas(idea.id);
}, [listLinkedIdeas, idea.id]); // 替换idea为idea.id

2. 正确配置useEffect的依赖数组 #

添加isOpen和handleListLinkedIdeas作为依赖，确保仅当Modal打开（isOpen变为true）或依赖项变化时执行数据请求，避免无限循环：

useEffect(() => {
  // 仅当Modal打开时执行请求
  if (!isOpen) return;

  const fetchData = async () => {
    await getIdeasForLink({ search: searchState });
    await handleListLinkedIdeas();
  };

  fetchData();
}, [isOpen, handleListLinkedIdeas, searchState]); // 添加必要依赖

注：添加searchState是因为getIdeasForLink依赖该值，若搜索状态变化也需重新获取候选创意列表。

3. 修复handleUnlinkidea的调用参数 #

组件中LinkedIdeaCard的关闭按钮未传递secondaryIdeaId，会导致参数错误，可能引发意外状态更新：

<IoMdClose 
  onClick={() => handleUnlinkidea(linkedIdea.id)} // 传递正确的secondaryIdeaId
  size={15} 
  style={{ cursor: "pointer" }} 
/>

4. 优化listLinkedIdeas的依赖（可选） #

虽然dispatch在useReducer中是稳定的，但为了规范，可将其添加到useCallback依赖中（不影响功能，但符合最佳实践）：

const listLinkedIdeas = useCallback(async (ideaId: string) => {
  try {
    dispatch({ type: 'SET_LOADING', loading: true });
    const { data: { linkedIdeas } } = await api.get(`/idea-links/${ideaId}`);
    dispatch({ type: 'SET_LINKED_IDEAS', linkedIdeas });
    dispatch({ type: 'SET_LOADING', loading: false });
  } catch (err) {
    toast.error(err?.response?.data?.message || 'Erro ao buscar ideias vinculadas');
  }
}, [dispatch]); // 添加dispatch到依赖

关键说明 #

• 避免在useEffect依赖中加入linkedIdeas，否则每次数据更新都会触发新的请求，直接导致无限循环。
• 使用值类型（如idea.id）作为useCallback的依赖，确保回调函数引用稳定，减少不必要的重渲染。
• 利用isOpen控制请求时机，仅当Modal真正打开时才获取数据，避免无效请求。

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