Warum wird meine React-Funktion „onClick' während des Renderns ausgelöst und wie kann ich dies verhindern?

React onClick-Funktionsauslöser beim Rendern: Warum und wie man es verhindert

In React-Anwendungen umfasst das Erstellen benutzerdefinierter Komponenten häufig die Übergabe von Daten und Funktionen zu untergeordneten Komponenten. Beim Umgang mit einer Liste von Objekten und einer Löschfunktion kann es zu einem Problem kommen, bei dem die onClick-Funktion beim Rendern ausgelöst wird und nicht beim Klicken.

Codebeispiel:

Betrachten Sie den folgenden Code:

const TaskList = React.createClass({
  render: function() {
    const tasks = this.props.todoTasks.map(todo => (
      <div>
        {todo.task}
        <button type="submit" onclick="{this.props.removeTaskFunction(todo)}">
          Submit
        </button>
      </div>
    ));
    return (
      <div classname="todo-task-list">{tasks}</div>
    );
  },
});

Erklärung des Problems:

Das Problem tritt auf, weil unser Code this.props.removeTaskFunction(todo) aufruft, anstatt einfach zu übergeben Funktion für onClick. Dieser sofortige Aufruf bewirkt, dass die Funktion während des Renderns ausgeführt wird.

Lösung:

Um dieses Problem zu lösen, können wir eine Pfeilfunktion verwenden, wie im folgenden Code dargestellt:

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

Pfeilfunktionen in React:

Pfeilfunktionen, gekennzeichnet durch () => {} ist eine prägnante Syntax, die in ES6 eingeführt wurde. Sie bieten mehrere Vorteile für die React-Entwicklung:

• Verbesserte Leistung: Durch die Verwendung von Pfeilfunktionen vermeiden Sie unbeabsichtigte erneute Renderings, die durch Kontextbindung verursacht werden.
• Flexibilität:Pfeilfunktionen können als Rückrufe oder Ereignishandler direkt an Funktionen höherer Ordnung übergeben werden.
• Verbesserte Lesbarkeit:Pfeilfunktionen vereinfachen den Code, da keine explizite Bindung erforderlich ist( )-Anweisungen.

Durch die Konvertierung des onClick-Handlers in eine Pfeilfunktion können wir daher sicherstellen, dass die Löschfunktion nur ausgeführt wird, wenn auf die Schaltfläche geklickt wird, wodurch unbeabsichtigte Ausführungen während des Renderns verhindert werden.

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