La fonction est appelée plusieurs fois lors de l'utilisation de useEffect transmise au composant React enfant

Question

J'ai une page avec plusieurs balises ChildComponent et je souhaite que chaque ChildComponent sache quelle API appeler en fonction du ChildComponent sur lequel l'utilisateur a cliqué. onClick() ouvrira un modal.

J'ai remarqué que lorsque le modal est ouvert, l'appel API est effectué deux fois. Lorsque je ferme le modal, l'appel API sera à nouveau effectué.

Ce que j'ai appris de cet article, c'est que React se comporte correctement - en appelant plusieurs fois des fonctions dans les composants fonctionnels de React

Existe-t-il une autre façon de structurer cela pour qu'il n'y ait qu'un seul appel API axios à la fois ?

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

Si vous utilisez React 18, vous obtenez cette erreur de réactivité, veuillez consulter ce post https://taig.medium.com/prevent-react-from-triggering-useeffect-twice-307a475714d7

Answer 2

Si je comprends bien votre problème et votre tâche, j'essaierai d'écrire ma solution.

Puisque vous avez un état de contrôle modal sur le composant parent, chaque changement déclenchera le nouveau rendu de votre composant parent, et vos composants enfants seront également restitués, et puisque les fonctions sont des objets dans JS, votre fonction de récupération à chaque fois un lien différent sera restitué et votre useEffect dans ChildComponent pensera que votre fonction a changé.

Donc, je pense que la meilleure solution est d'ajouter un mémo au composant enfant comme export default memo(ChildComponent) （您可以从“react”导入备忘录）。之后，您应该使用 useCallback 包装 fetchPosts 和 handleOnclick。你会得到类似的东西 const fetchPosts = useCallback(() => doSomething(), [])

J'espère que cela vous aidera.