无法在componentWillMount中设置状态

Question

我正在创建一个简单的聊天应用程序，在其中我通过axios对数据库进行api调用，该API返回了一系列消息对象。我可以在componentWillMount中进行axios调用时获取数据。然后，我试图设置状态以显示对话。这是代码：

export default class Chat extends Component {
  constructor(props){
    super(props);

    this.state = {
      messages : [],
      message : '',
    };
    this.socket = io('/api/');
    this.onSubmitMessage = this.onSubmitMessage.bind(this);
    this.onInputChange = this.onInputChange.bind(this);
  }

  componentWillMount() {
    axios.get(`api/messages`)
      .then((result) => {
        const messages = result.data
        console.log("COMPONENT WILL Mount messages : ", messages);
        this.setState({ 
          messages: [ ...messages.content ] 
        })
  })
};

我看过一些有关生命周期功能和设置状态的帖子，似乎我在做正确的事情。

再次强调，axios调用正常，设置状态不正常。我仍然看到一个空数组。提前致谢！

编辑：这是专门针对我的问题的解决方案。它被埋在评论中，所以我想把它留在这里。

“我发现了问题。实际上是我解析数据的方式。…messages.content上的散布运算符不起作用，因为messages.content不存在。messages[i]
.content存在。所以我解决的方法是传播……消息，然后在一个子组件中，我将这些对象映射到并解析.content属性。感谢大家的帮助！”

Answer 1

在您的情况下，您setState()将无法使用，因为您正在setState()异步回调中使用

工作小提琴：https :
//jsfiddle.net/xytma20g/3/

您正在进行异步API调用。因此，setState仅在接收到数据后才调用。它对componentWillMount或不执行任何操作componentDidMount。您需要处理message渲染中的空白。当您从API接收数据时，请将数据设置为状态，然后组件将使用新状态重新渲染，该状态将反映在渲染中。

伪代码：

export default class Chat extends Component {
  constructor(props){
    super(props);

    this.state = {
      messages : [],
      message : '',
    };
    this.socket = io('/api/');
    this.onSubmitMessage = this.onSubmitMessage.bind(this);
    this.onInputChange = this.onInputChange.bind(this);
  }

  componentWillMount() {
    axios.get(`api/messages`)
      .then((result) => {
        const messages = result.data
        console.log("COMPONENT WILL Mount messages : ", messages);
        this.setState({ 
          messages: [ ...messages.content ] 
        })
  })

  render(){
    if(this.state.messages.length === 0){
     return false //return false or a <Loader/> when you don't have anything in your message[]
    }

   //rest of your render.
  }
};