Question

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

使用下面给出的值打印，如'[]'和[“answers”]

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

{ “状态”：1， “价值”：4， “数据”：{ “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

React.StrictMode是2018年在版本16.3.0中引入的包装器。最初，它仅适用于类组件，而16.8.0之后，它也适用于钩子。

如发行说明中所述： React.StrictMode是一个包装器，可帮助为异步渲染准备应用程序

为什么要进行双重渲染？我们从React.StrictMode用法中获得的好处之一是，它可以帮助我们检测渲染阶段生命周期中的意外副作用。

您可以在此链接上了解更多信息：

https://mariosfakiolas.com/blog/my-react-components-render-twice-and-drive-me-crazy/

Answer 2

如果您确实要记录props中的数据，请将log保留在componentWillReceiveProps()中。因为它从父props

中的每个新Component被解雇了

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

只要render()和props发生变化，您的state方法就会被调用。即只要shouldComponentUpdate() React.Component返回true。

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

了解here关于React Component及其生命周期的更多信息。

已更新：如果您有空数据，请在null

中返回render()

＆＃13;

class Discuss extends React.Component {
  constructor() {
    super();
    this.state = {
      discussions: []
    };
  }
  componentWillRecieveProps(nextProps){
    console.log(nextProps.answer_text); //you can log data from props here to check
  }
  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() {
      const {answer_text} = this.props;
        return ( 
          <div>
                { answer_text && answer_text.length > 0 || null} 
          </div>
        )
	};

}
                

ReactDOM.render(<Discuss/>,document.getElementById('content'))

＆＃13;

Answer 3

这很正常。 AJAX调用是异步的，因此您的组件会立即继续呈现，第一次将空数组置于其状态，该数组作为ActionBar的prop传递。当AJAX调用返回时，它会填充数组并更新状态，这会导致再次调用render（），这会重新呈现ActionBar以及更新的prop。

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

3 个答案: