Ich habe eine Seite mit mehreren ChildComponent-Tags und möchte, dass jeder ChildComponent mitgeteilt wird, welche API sie aufrufen soll, basierend auf der ChildComponent, auf die der Benutzer geklickt hat. onClick() öffnet ein Modal.

Mir ist aufgefallen, dass beim Öffnen des Modals der API-Aufruf zweimal erfolgt. Wenn ich das Modal schließe, wird der API-Aufruf erneut durchgeführt.

Was ich aus diesem Beitrag gelernt habe, ist, dass sich React korrekt verhält – indem es Funktionen in React-Funktionskomponenten mehrmals aufruft

Gibt es eine andere Möglichkeit, dies so zu strukturieren, dass jeweils nur ein Axios-API-Aufruf erfolgt?

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