Warum wird meine React-Funktion „onClick' während des Renderns ausgelöst?

Verstehen der vorzeitigen Ausführung der onClick-Funktion von React

In React ist es wichtig zu verstehen, warum die onClick-Funktion während des Renderns ausgelöst werden kann. Dieses Phänomen kann auftreten, wenn Werte an untergeordnete Komponenten übergeben werden.

Problem:

Beim Zuordnen über eine Liste von Objekten und Verwenden der Funktion „map()“, um sie anzuzeigen, wird die Die jedem Objekt zugeordnete Schaltfläche ruft die onClick-Funktion während des Renderns vorzeitig auf.

Ursache:

Der Schlüssel zu diesem Problem liegt in der Art und Weise, wie die onClick-Funktion übergeben wird. Im bereitgestellten Code ist die folgende Zeile für dieses Verhalten verantwortlich:

<button type="submit" onClick={this.props.removeTaskFunction(todo)}>

Hier ruft das onClick-Attribut die Funktion direkt auf, indem es eine Klammer voranstellt. Dies bedeutet, dass der onClick-Handler sofort ausgeführt wird, wodurch die Funktion während des Renderns ausgeführt wird.

Lösung:

Um eine vorzeitige Ausführung zu verhindern, sollten Sie die Funktion selbst an übergeben onClick statt es aufzurufen. Dies kann durch die Verwendung einer in ES6 eingeführten Pfeilfunktion erreicht werden. Hier ist der korrigierte Code:

<button type="submit" onClick={() => this.props.removeTaskFunction(todo)}>

Erklärung:

In dieser Zeile verwenden wir eine Pfeilfunktion, um eine prägnante anonyme Funktion zu definieren, die an onClick übergeben wird. Wenn auf die Schaltfläche geklickt wird, ruft die Pfeilfunktion dann die „removeTaskFunction“ mit dem todo-Objekt auf. Dieser Ansatz stellt sicher, dass die onClick-Funktion nur ausgelöst wird, wenn auf die Schaltfläche geklickt wird, nicht während des Renderns.

Das obige ist der detaillierte Inhalt vonWarum wird meine React-Funktion „onClick' während des Renderns ausgelöst?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!