Fungsi dipanggil beberapa kali apabila menggunakan useEffect yang dihantar kepada komponen React anak

Question

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

Answer 1

Jika anda menggunakan React 18, anda mendapat ralat ini dalam reaktiviti, sila semak siaran ini https://taig.medium.com/prevent-react-from-triggering-useeffect-twice-307a475714d7

Answer 2

Jika saya memahami masalah dan tugas anda dengan baik, saya akan cuba menulis penyelesaian saya.

Memandangkan anda mempunyai keadaan kawalan modal pada komponen induk, setiap perubahan akan mencetuskan komponen induk anda untuk dipaparkan semula, dan komponen anak anda juga akan dipaparkan semula, dan memandangkan fungsi ialah objek dalam JS, fungsi pengambilan anda Setiap kali pautan yang berbeza akan dipaparkan semula dan useEffect anda dalam ChildComponent akan menganggap fungsi anda telah berubah.

Jadi, saya rasa penyelesaian terbaik ialah menambah memo pada komponen anak anda seperti export default memo(ChildComponent) （您可以从“react”导入备忘录）。之后，您应该使用 useCallback 包装 fetchPosts 和 handleOnclick。你会得到类似的东西 const fetchPosts = useCallback(() => doSomething(), [])

Semoga membantu.