Warum führt das onclick-Ereignis 2 verschiedene Funktionen aus

Ich versuche, eine Funktion auszuführen, indem ich im Code auf Modify2 oder Edit2 klicke. Es läuft die ganze Zeit die mit onClick definierte Funktion und dann wieder showCard

Abschnittslasten auflisten

Wählen Sie einen Eintrag aus der Liste aus, es wird showCard ausgeführt und das Element geladen.

Ein Klick auf Edit2 oder Modify2 löst showConn und sofort wieder showCard aus

Es sollte nur showConn auslösen!

Und warum läuft showCard direkt nach showConn?

Danke für alle Vorschläge.

Der Code:

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
function App() {
 const [list, setList] = useState(true);
 const [card, setCard] = useState(false);
 const [netconn, setNetconn] = useState(false);
 const [networks, setNetworks] = useState([]);
 const [network, setNetwork] = useState({});
 useEffect(() => {
 fetch(window.location.protocol+"//"+window.location.hostname+":3001/networks/list")
.then((response) => response.json())
.then((responseJson) => {
 setNetworks(responseJson.data);
 });
 }, []);
 let showCard = (id) => {
 console.log( "Show Card");
 fetch(window.location.protocol+`//`+window.location.hostname+`:3001/networks/${id}`)
.then((response) => response.json())
.then((responseJson) => {
 setNetwork(responseJson.data);
 setList(false);
 setNetconn(false);
 setCard(true);
 });
 };
 
 let showConn = (id) => {
 console.log( "Show Connection");
 setList(false);
 setCard(false);
 setNetconn(true);
 };
 let showList = () => {
 setCard(false);
 setNetconn(false);
 setList(true);
 };
 const handleSubmit = (event) => {
 event.preventDefault();
 }
 const handleGetconn = (event,id) => {
 event.preventDefault();
 alert(id);
 showConn(id)
 }
 return (
 <div className="container">
 {netconn? (
 <div className="row">
 <div className="col-auto">
 <div
 onClick={showCard(network._id)} 
 className="btn btn-primary">Submit</div> 
 <div 
 onClick={showList()}
 className="btn btn-default">Cancel</div>
 </div>
 </div>
 ): null}
 {list? (
 <div className="list-group">
 {networks.map((network) => (
 <li
 key={network._id}
 onClick={() => showCard(network._id)}
 className="list-group-item list-group-item-action">
 {network.name}
 </li>
 ))}
 </div>
 ): null}
 {card? (
 <div className="row">
 <div className="col-auto">
 <div 
 onClick={(e) => handleGetconn(e,network._id)} 
 className="btn btn-success">
 Modify2
 </div>
 <div onClick={() => showConn(network._id)} className="btn btn-primary">
 Edit2
 </div>
 <div onClick={() => showList()} className="btn btn-default">
 Back
 </div>
 </div>
 </div>
 ): null}
 </div>
 );
}
export default App;

Lösung des Problems

Sie rufen die Funktion showCardbei jedem Rendering hier auf:

onClick={showCard(network._id)} 

Im obigen Code-Auszug ist der Prop-Wert onClick der Rückgabewert des Funktionsaufrufs, der bei jedem Rendern aufgerufen wird.

Für das <li>Element ist die onClickProp richtig eingestellt.

onClick={() => showCard(network._id)}

Hier ist der Prop-Wert onClick ein Verweis auf eine Funktion, die bei einem Click-Ereignis aufgerufen wird.