Javascript 将数据从API提取到状态

我在App.js中有以下内容

  constructor(props){
      super(props)
      this.state = {data: 'false'};
  }



  componentDidMount(){
      this._getData();
  }



  _getData = () => {
      const url = 'http://localhost:8888/chats';

      fetch(url, { credentials: 'include' })
        .then((resp) => resp.json())
        .then(json => this.setState({ data: json.chats }))

  }

  render() {
      return (
           <div className="App">
              {
               this.state.chats &&
               this.state.chats.map( (buddy, key) =>
                  <div key={key}>
                    {buddy}
                  </div>
               )}
               <Chat />
           </div>
      )
  }

import React, { Component } from 'react';

class Chat extends Component {
    render() {
        console.log(this.props);
        return (
            <div className="App">
                MY Chat
            </div>
        );
    }
}

export default Chat;

但我得到的是空数组和警告，如下所示：

连接到 ws://localhost:3000/sockjs节点/321/uglf2ovt/websocket被中断 当页面正在加载时

我不确定是什么问题，为什么变量是空的

---

感谢您的时间。

对于无法获取任何数据时出现的问题，请在构造函数中绑定您的方法

constructor(props) {
    super(props)
    this.state = { chats: 'false'};
    this._getData = this._getData.bind(this);
}

此外，您没有向聊天组件传递任何道具。例如，您可以执行以下操作：

render() {
    return (
        <div className="App">
           {
            this.state.chats &&
            this.state.chats.map( (buddy, key) =>
                <div key={key}>
                    {buddy}
                </div>
            )}
            <Chat chats={this.state.chats} />
        </div>
     );
}

---

对于无法获取任何数据的问题，请在构造函数中绑定您的方法

constructor(props) {
    super(props)
    this.state = { chats: 'false'};
    this._getData = this._getData.bind(this);
}

此外，您没有向聊天组件传递任何道具。例如，您可以执行以下操作：

render() {
    return (
        <div className="App">
           {
            this.state.chats &&
            this.state.chats.map( (buddy, key) =>
                <div key={key}>
                    {buddy}
                </div>
            )}
            <Chat chats={this.state.chats} />
        </div>
     );
}

---

非常感谢，这解决了问题。但是我要买一个新的。我在控制台

对象{chats:undefined}

中得到这个。知道为什么会发生这种情况吗？因为您正在将获取数据保存在名为data in state的属性中，然后尝试从名为chats的状态打印属性。非常感谢，你为我节省了数小时的研究时间我知道你已经回答了这个问题，但是如果你告诉我如何解决这个问题，我会非常感激，因为你已经完成了代码。更改后，我得到的

对象作为React子对象无效（找到：具有键{buddy，lastMessage，timestamp}的对象）。如果要呈现子对象集合，请改用数组。in div（在App.js:38）in div（在App.js:34）in App（在index.js:6）

。我需要更多的钥匙吗？如果是，怎么做？再次感谢。如果您不想询问是否可以理解：）请在映射this.state.chats之前先执行console.log，然后检查是否正在尝试循环数组。非常感谢，这解决了问题。但是我要买一个新的。我在控制台

对象{chats:undefined}

中得到这个。知道为什么会发生这种情况吗？因为您正在将获取数据保存在名为data in state的属性中，然后尝试从名为chats的状态打印属性。非常感谢，你为我节省了数小时的研究时间我知道你已经回答了这个问题，但是如果你告诉我如何解决这个问题，我会非常感激，因为你已经完成了代码。更改后，我得到的

对象作为React子对象无效（找到：具有键{buddy，lastMessage，timestamp}的对象）。如果要呈现子对象集合，请改用数组。in div（在App.js:38）in div（在App.js:34）in App（在index.js:6）

。我需要更多的钥匙吗？如果是，怎么做？再次感谢。如果您不想询问是否可以理解：）在映射this.state.chats之前先做一个console.log，并检查您是否正在尝试循环数组。您的状态有一个名为

data

的属性，当

fetch

返回时，您将保存该

数据

属性。但是在

render（）

上，您使用

this.state.chats

而不是

this.state.data

。您的状态有一个名为

data

的属性，当

fetch

返回时，您可以保存该

数据

属性。但是在

render（）

上，您使用

this.state.chats

而不是

this.state.data

。

class Chat extends Component {
  render() {
    console.log(this.props); // Here you will have an object like { chats: [data] }
    return (
      <div className="App">
      MY Chat
      </div>
    );
  }
}

_getData = () => {
    const url = 'http://localhost:8888/chats';

    fetch(url, { credentials: 'include' })
        .then((resp) => resp.json())
        .then(json => this.setState({ chats: json.chats }))

}