Question

 void componentWillReceiveProps(
  object nextProps
)

官方文档说这是=＆gt;组件接收新道具时调用。 不会为初始渲染调用此方法。

我正在父组件中使用下面的道具渲染一个组件 -

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

ArticleDetails组件定义了componentWillReceiveProps方法。根据文档，当我刷新页面（初始渲染）时不应该调用它，但确实如此。如果原因是因为我在第一次调用时传递道具，那么有没有什么方法可以在没有传递道具的情况下第一次渲染它，然后以某种方式传递道具呢？

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

在文章细节中，我通过道具传递this.state.details

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

但是当我通过更新this.state.somethingdifferent更新另一个组件的父级状态时，在这种情况下，它会为所有剩余组件再次传递相同的props值。这就是为什么componentWillReceiveProps被触发了。

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

Answer 2

首先，您没有正确使用componentWillReceiveProps。该方法通过下一个道具。在该方法中使用this.props将为您提供以前的道具。例如。（伪代码）

input field initial props = Hi 
input field update to props = Hi! 
nextProps = Hi!
this.props = Hi

我认为你对代码结构的长期不满意。使用props来设置状态被认为是反模式。 https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

为什么不直接使用道具？

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

我会这样做......

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'))

componentWillReceiveProps的问题

2 个答案: