我有一个包含多个 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); 
如果您使用的是 React 18，则反应性中会出现此错误，请检查此帖子 https://taig.medium.com/prevent-react-from-triggering-useeffect-twice-307a475714d7
如果我很好地理解您的问题和任务，我会尝试编写我的解决方案。
由于您在父组件上有模态控制状态，每次更改时都会触发您的父组件重新渲染，并且您的子组件也会重新渲染，并且由于函数是 JS 中的对象，因此您的 fetch 函数每次都会有不同的链接重新渲染并且您在 ChildComponent 中的 useEffect 会认为您的函数已更改。
所以，我认为最好的解决方案是为您的子组件添加备忘录，例如
export default memo(ChildComponent)（您可以从“react”导入备忘录）。之后，您应该使用 useCallback 包装 fetchPosts 和 handleOnclick。你会得到类似的东西const fetchPosts = useCallback(() => doSomething(), [])希望有帮助。