console.log 打印数据两次 [reactjs]

Question

console.log 在打印空数组时打印该值两次，在另一个值中打印从 ajax 调用获取的值。

下面给出的值打印为“[]”和[“已回答”]

我不知道它在哪里初始化，我在哪里放置调试器，它只在那里停止一次，只是为了打印 ajax 数据值

{ "status": 1, "value": 4, "data": { "answer_text": "已回答" } }

class Discuss extends React.Component {
  constructor() {
    super();
    this.state = {
      discussions: []
    };
  }
  componentWillMount() {
    this._getData();
  }
  _getAnswerText() {
    return this.state.discussions.map(discussion => discussion.answer_text);
  };

  render() {
    const comments = this._getComments();
    return ( <div> {comments} <ActionBar answer_text={this._getAnswerText()}/></div > );
  });
}

_getData() {
  $.ajax({
    method: 'GET',
    url: '/someurl'
    success: (discussions) => {
      var array = [];
      array.push(discussions);
      var dis = []
      dis.push(array[0].data)
      this.setState({
        discussions: dis
      });
    }
  });
}
}

class ActionBar extends React.Component {
    constructor(props) {
      super(props);
    };
    render() {
        console.log(this.props.answer_text)
        return ( <div> {this.props.answer_text} </div>)
	};

}

ReactDOM.render(<Discuss/>,document.getElementById('content'));

Answer 1

如果您确实想记录其中的数据props，请将其保留log在componentWillReceiveProps(). 因为它会被props父母的每一个新人解雇Component

componentWillRecieveProps(nextProps){
    console.log(nextProps.answer_text); //you can log data from props here to check
}

每当和发生变化时，您的render()方法就会被调用。即每当您返回时。propsstateshouldComponentUpdate()React.Componenttrue

因此，很明显，render()如果数据发生变化，您将多次看到方法的执行(props or state)。

从这里阅读更多关于React Component它的生命周期的信息。

更新：如果您有空数据，只需null返回render()

componentWillRecieveProps(nextProps){
    console.log(nextProps.answer_text); //you can log data from props here to check
}