Problem mit componentWillReceiveProps

Question

void componentWillReceiveProps(
    object nextProps 
) 

Dies ist, was die offizielle Dokumentation sagt => Wird aufgerufen, wenn eine Komponente neue Requisiten erhält. Diese Methode wird nicht für das anfängliche Rendern aufgerufen.

Ich Rendern eine Komponente mit Requisiten wie unten in der übergeordneten Komponente -

<ArticleDetails articleDetails={this.state.details}></ArticleDetails> 

Artikelansicht Komponente componentWillReceiveProps Methode definiert. Laut Dokumentation soll es nicht aufgerufen werden, wenn ich die Seite aktualisiere (Initial render), aber das tut es. Wenn der Grund ist, weil ich Requisiten beim ersten Aufruf selbst übergebe, gibt es irgendeinen Weg, dass du es zum ersten Mal rendern kannst, ohne Requisiten zu geben und dann später irgendwie Requisiten zu übergeben?

var ArticleDetails = React.createClass({ 
    getInitialState: function() { 
    return {author: '', tags: '', data:'', relatedArticles:{}}; 
    }, 
    componentWillReceiveProps :function(){ 
    console.log("i am called"); 
    this.setState({tags:this.props.articleDetails._id||''}) 
    }, 
    handleSubmit: function(e) { 
    e.preventDefault(); 
    /// do something 
    }, 
    render: function() { 
    return (
     <form className="articleForm" onSubmit={this.handleSubmit}> 
     <input 
      type="text" 
      placeholder="Your name" 
      value={this.state.heading} 
     /> 
     <input 
      type="text" 
      placeholder="Say something..." 
      value={this.state.tags} 
     /> 
     <input type="submit" value="Post" /> 
     </form> 
    ); 
    } 
}); 

Answer 1

Zuerst bist du componentWillReceiveProps nicht richtig verwendet wird. Die Methode wird als nächstes Requisiten übergeben. Wenn Sie this.props innerhalb dieser Methode verwenden, erhalten Sie die vorherigen Requisiten. Z.B. (in Pseudocode)

Ich glaube nicht, dass Sie mit Ihrer Code-Struktur langfristig zu glücklich sein werden. Die Verwendung von Requisiten zum Setzen des Zustands wird als ein Anti-Muster betrachtet. https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

Warum nicht die Requisiten direkt verwenden?

<input 
    type="text" 
    placeholder="Say something..." 
    value={this.props.tags} 
/> 

Ich würde es auf diese Weise tun ...

http://jsbin.com/sojaju/edit?js,output

var Article = React.createClass({ 
    getInitialState: function() { 
     return { tags : 'Sports, Football'}; 
    }, 
    handleSubmit: function(e) { 
     e.preventDefault(); 
     const { value } = e.target; 
     this.setState({ tags: value }); 
     // send to server 
    }, 
    handleTagChange(e) { 
     const { value } = e.target; 
     this.setState({ tags: value }); 
    }, 
    render: function() { 
     return (
      <ArticleDetails 
       articleDetails={this.state.tags} 
       handleSubmit={this.handleSubmit} 
       handleTagChange={this.handleTagChange} 
      /> 
      ); 
    } 
}); 

var ArticleDetails = React.createClass({ 

    render: function() { 
     const { handleTagChange, articleDetails } = this.props; 
    return (
     <form className="articleForm" onSubmit={this.props.handleSubmit}> 
     <input 
      type="text" 
      placeholder="Say something..." 
        onChange={handleTagChange} 
      value={articleDetails} 
     /> 
     <input type="submit" value="Post" /> 
     </form> 
    ); 
    } 
}); 

ReactDOM.render(<Article />, document.getElementById('app')) 

Answer 2

In Artikel Details I vorging this.state.details durch Requisiten

<ArticleDetails articleDetails={this.state.details}></ArticleDetails> 

Aber wenn ich Zustand in Eltern für eine andere Komponente aktualisieren, indem Sie in diesem Fall die Aktualisierung this.state.somethingdifferent Es geht gleiche Requisitenwerte für alle übrigen Komponenten. Deshalb wurde componentWillReceiveProps ausgelöst.

https://facebook.github.io/react/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A.html