当使用 useEffect 传递给子 React 组件时，函数被多次调用

Question

我有一个包含多个 ChildComponent 标签的页面，我希望每个 ChildComponent 都被告知要根据用户单击的 ChildComponent 来调用哪个 API。 onClick() 将打开一个模式。

我注意到，当模态框打开时，API 调用会进行两次。当我关闭模态框时，将再次进行 API 调用。

我从这篇文章中了解到，React 的行为是正确的 - 在 React 功能组件中多次调用函数

是否有另一种方法来构建这个，以便只有一个 axios API 调用一次？

const [posts, setPosts] = useState([]);

export default function ParentComponent() {
    const fetchPosts = useCallback(async () => {
        try {
            const result = await axios(`https://jsonplaceholder.typicode.com/posts`);
            setPosts(result.data.data);
        } catch (error) {
            console.log(error);
        }
    }, []);
}

<ChildComponent
      fetchPosts={fetchPosts}
      onClick={handleOnclick}
/>

const ChildComponent = ({ fetchPosts }) => {
    useEffect(
       () => props.fetchPosts, 
       [props.fetchPosts]
    );
}

export default memo(ChildComponent);

Answer 1

如果您使用的是 React 18，则反应性中会出现此错误，请检查此帖子 https://taig.medium.com/prevent-react-from-triggering-useeffect-twice-307a475714d7

Answer 2

如果我很好地理解您的问题和任务，我会尝试编写我的解决方案。

由于您在父组件上有模态控制状态，每次更改时都会触发您的父组件重新渲染，并且您的子组件也会重新渲染，并且由于函数是 JS 中的对象，因此您的 fetch 函数每次都会有不同的链接重新渲染并且您在 ChildComponent 中的 useEffect 会认为您的函数已更改。

所以，我认为最好的解决方案是为您的子组件添加备忘录，例如 export default memo(ChildComponent) （您可以从“react”导入备忘录）。之后，您应该使用 useCallback 包装 fetchPosts 和 handleOnclick。你会得到类似的东西 const fetchPosts = useCallback(() => doSomething(), [])

希望有帮助。