Saya mempunyai halaman dengan berbilang teg ChildComponent dan saya mahu setiap ChildComponent diberitahu API mana yang hendak dipanggil berdasarkan ChildComponent yang diklik oleh pengguna. onClick() akan membuka modal.

Saya perasan bahawa apabila modal dibuka, panggilan API dibuat dua kali. Apabila saya menutup modal, panggilan API akan dibuat semula.

Apa yang saya pelajari daripada siaran ini ialah React berkelakuan dengan betul - memanggil fungsi beberapa kali dalam komponen berfungsi React

Adakah terdapat cara lain untuk menstruktur ini supaya hanya terdapat satu panggilan API axios pada satu masa?

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);