當使用 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(), [])

希望有幫助。