Reactjs fetch 方法返回空数组

Question

我正在尝试获取一些数据，格式为：

[
  {
    "id": 1,
    "some_data": "..."
  },
  ...
]

我想要得到的是一个列表，显示来自获取的项目。如果我将相同的数据放在项目中的一个文件中，它就可以工作。

但是，当我尝试映射它时，我收到一条错误消息“this.data.map 不是函数”。所以我通过使用Array.from() 对其进行了一些更改。目前看起来是这样的：

export default class Main extends React.Component { 
  constructor(props) {
    super(props);
    this.state = {
      items = [];
    };
    this.getData = this.getData.bind(this);
  }

  getData = () => {
    fetch("URL",{
      method: "get",
      header: { "Content-Type": "application/json" }
    })
    .then(response => {
      var array = Array.from(response.json())
      this.setState({items: array});
    })
  }

  render() {
    const list = this.state.items.map((r, i) => {
      return (
        <Item
          id = { r[i].id }
          some_data = { r[i].some_data }
          ...
        />
      )
    })
    return(
      <div>
        <Item
          p = {list}
        >
      </div>
    )
  }
}

Answer 1

首先不需要状态来存储响应。由于状态值而发生的事情没有反映在您的渲染中。

1. 在成功响应中调用函数并在函数中映射响应并在此处设置状态。

或

1. 将下面的代码放在渲染函数之外，分配给如下变量

   常量列表 = this.state.items.map((r, i) => { 返回 （ ) }) 返回（ ) }

   渲染（）{ {列表} }

Answer 2

试试这样的.....

最好在安装组件后加载数据。另外，没有 URL，我假设你已经隐藏了这个。

一旦您“看到”响应内容，您就可以相应地对其进行编码。

export default class Main extends React.Component { 
    constructor(props) {
        super(props);
        this.state = {
          items = [];
        };
        // this.getData = this.getData.bind(this);
    }

    componentDidMount(){

        // Attempt to load data once component mounted.

        this.getData();

    }

    getData = () => {
        // Don't you need the URL below, or have you deliberately hidden it?
        fetch("URL",{
        method: "get",
        header: { "Content-Type": "application/json" }
    })
    .then(response => {

        console.log(response);  // See exactly what is in response....

        var array = Array.from(response.json())
        console.log(array);  // Check array is really what you want

        // You could try a JSON.Parse....
        var jsonArray = JSON.Parse(response);
        console.log(jsonArray);

        this.setState({items: array});
     })
  }

  render() {
      const list = this.state.items.map((r, i) => {
      return (
          <Item
          id = { r[i].id }
          some_data = { r[i].some_data }
           ...
        />
       )
    })
    return(
      <div>
       <Item
          p = {list}
        >
     </div>
    )
   }
}