this.setState setzt meinen Status überhaupt nicht?

Ich erstelle gerade eine kleine React App für eine Einkaufsliste. Ich versuche, die Listenelemente als Status zu halten. Sobald die Eingabe gesendet wurde, wird zum Hinzufügen eines neuen Elements eine Funktion aufgerufen, die die neue Liste an die App sendet und außerdem versucht, den Status auf '' zurückzusetzen. Aus irgendeinem Grund funktioniert das nicht. Ich habe die Protokollierung überprüft und kann auch daran erkennen, dass meine Eingabe nicht zurückgesetzt wird. Hierthis.setState setzt meinen Status überhaupt nicht?

ist der Code:

class List extends React.Component { 
    state = {newItem: ''}; 

    addItem = event => { 
    event.preventDefault(); 

    this.props.onSubmit(this.state.newItem); 
    this.setState({newItem: ''}); 
    } 


    render() { 
     return (
     <div> 
      {this.props.currentUser.shoppingList.map(item => 
      <ListItem 
       {...item} 
       updatedList={this.props.updatedList} 
      />)} 
      <form onSubmit={this.addItem}> 
       <input type="text" placeholder="Add new item!" 
       value={this.state.newItem} 
       onChange={event => this.setState({newItem: event.target.value})} 
       /> 
       <button>Save</button> 
      </form> 
     </div> 
    ); 
    } 
}

Quelle

2017-12-07 Collin DeSoto

bind 'this' auf Ihre Methode:'

@JosanIracheta wenn Sie addItem als Pfeil Funktion wie in dem Beispiel definieren, die Sie nicht müssen Sie es an diese binden – Harald

Das Problem ist, dass Sie nicht this auf die addItem Funktion zu binden.

Try Ändern <form onSubmit={this.addItem}>

Um <form onSubmit={this.addItem.bind(this)}>

Quelle

2017-12-07 18:17:34

Sie müssen die Methode nicht an diese binden, wenn Sie die Syntax der öffentlichen Klassenfelder verwenden: https://reactjs.org/docs/handling-events.html – Harald

Ihr Zustand perfekt funktioniert. Problem kann mit Ihrem props sein. Hier ist die Arbeitsprobe außer ListItem.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>React State</title> 
    <meta charset="utf-8"> 
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
    <script type="text/jsx"> 
     class List extends React.Component { 
      state = {newItem: ''}; 

      addItem = event => { 
       event.preventDefault(); 
       console.log(this.state.newItem); 
       this.setState({newItem: ''}); 
      } 

      render() { 
       return (
        <div> 
         <form onSubmit={this.addItem}> 
          <input type="text" placeholder="Add new item!" 
          value={this.state.newItem} 
          onChange={event => this.setState({newItem: event.target.value})} 
          /> 
          <button>Save</button> 
         </form> 
        </div> 
       ); 
      } 
     } 

     ReactDOM.render(
      <List />, 
      document.getElementById("app") 
     ); 
    </script> 
    </head> 
    <body> 
    <div id="app"></div> 
    </body> 
</html>

Quelle

2017-12-07 18:24:29

this.setState setzt meinen Status überhaupt nicht?

Antwort

Verwandte Themen