小编Phi*_*hil的帖子

我正在创建一个简单的聊天应用程序,我通过axios对我的数据库进行api调用,返回一组消息对象.当我在componentWillMount中进行axios调用时,我能够获取数据.然后我尝试setState来显示对话.这是代码:

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不存在.message [i] .content存在.所以我的修复只是传播...消息然后在子组件中我映射对象并解析.content属性.感谢帮助人!