Wie Komponenten aktualisiert werden, wenn sich der Elternstatus ändert, reagiere bei der Verwendung von Reagieren Router

Question

Ich habe die übergeordnete Komponente namens App. Es enthält den Staat und die Form, die den Staat verändert.

Ich entfernte den unwichtigen Code. Wenn ich etwas in das Formular eintippe, wird ein Objektelement in state.item hinzugefügt, aber ToCompleteItemsComponent wird nicht aktualisiert. Gibt es eine Möglichkeit, dass die Komponente auf Zustandsänderung

class App extends Component { 
    state = { 
    items: [] 
    } 
    submitItem=(e)=> { 
     e.preventDefault(); 
     let items = this.state.items; 
     items.push({ 
     name: this.state.ValuePlaceholder, 
     completed: false 
     }); 
     this.setState({ 
     items 

     }); 
    } 

    render() { 

    return (<BrowserRouter> 
     <div className="wrap"> 
     ... 
     <form onSubmit={this.submitItem}> 
      <input type="text" /> 
     </form> 
      <Route exact path="/" 
       render={props => <ToCompleteItemsComponent 
       items={this.state.items} /> } 
       /> 
      </div> 
     </BrowserRouter> 
    ); 

    } 
} 

bearbeiten Dies ist die Komponente

class ToCompleteItemsComponent extends Component { 
componentWillReceiveProps(nextProps) { 
// check this.props vs nextProps and setState! 
// do whatever you want. 
    console.log(nextProps) 
} 
render(){ 
    return(<div> 
    <ul className="items"> 
    { 
    this.props.items.map((item,id)=> <li key={id}>{item.name} <span>x</span></li>) 
    } 
    </ul> 
    </div>) 
} 
} 
export default ToCompleteItemsComponent; 

console.log(nextProps) Gibt ein leeres Array

Answer 1

Wenn die Eltern Statusaktualisierungen Sie verwenden können, zu aktualisieren: componentWillReceiveProps

in ToCompleteItemsComponent Sie können dies tun:

componentWillReceiveProps() vor einem montierten Komponente aufgerufen wird neue Requisiten erhalten. Wenn Sie den Status als Antwort auf Prop-Änderungen aktualisieren müssen (z. B. um ihn zurückzusetzen), können Sie this.props und nextProps vergleichen und Zustandsübergänge unter Verwendung von this.setState() in diese Methode durchführen.

componentWillReceiveProps(nextProps) { 
    // check this.props vs nextProps and setState! 
    // do whatever you want. 
} 

Wie Sie in diesem Schnipsel sehen die console.log wie vorgesehen funktioniert. Ich habe die Art und Weise überarbeitet, wie du Dinge zu deinem Items-Array hinzufügst. Bitte beachten Sie, dass ich das genaue Attribut aus der Route entfernt habe, da ich in Schnipsel Routen nicht richtig mit BrowserRouter verwenden kann.

class App extends React.Component { 
 
    state = { 
 
    items: [] 
 
    } 
 
    submitItem=(e)=> { 
 
     e.preventDefault(); 
 
     this.setState({ 
 
     items: this.state.items.concat([{ 
 
      name: this.state.ValuePlaceholder, 
 
      completed: false 
 
     }]) 
 
     }); 
 
    } 
 

 
    render() { 
 
    return (<ReactRouterDOM.BrowserRouter> 
 
     <div className="wrap"> 
 
     <form onSubmit={this.submitItem}> 
 
      <input type="text" /> 
 
      <button type="submit">submit</button> 
 
     </form> 
 
      <ReactRouterDOM.Route path="/" 
 
       render={props => <ToCompleteItemsComponent 
 
       items={this.state.items} /> } 
 
       /> 
 
     </div> 
 
     </ReactRouterDOM.BrowserRouter> 
 
    ); 
 

 
    } 
 
} 
 

 
class ToCompleteItemsComponent extends React.Component { 
 
    componentWillReceiveProps(nextProps) { 
 
    // check this.props vs nextProps and setState! 
 
    // do whatever you want. 
 
    console.log("HALO", this.props, nextProps) 
 
    } 
 
    
 
    render(){ 
 
    return(
 
    <div> 
 
     <ul className="items"> 
 
     { 
 
     this.props.items.map((item,id)=> <li key={id}>{item.name} <span>x</span></li>) 
 
     } 
 
     </ul> 
 
    </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script> 
 
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script> 
 

 
<div id="root"></div>