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

首先，不需要任何状态来存储响应。由于状态值而发生的事件未反映在渲染中。

在成功响应内调用一个函数，并将响应映射到该函数内并在此处设置状态。

OR

将下面的代码放到分配给以下变量的渲染函数之外

常量列表= this.state.items.map（（r，i）=> { 返回（） }）返回（） }

render（）{ {list} }

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>
    )
   }
}

React.js提取方法返回空数组

2 个答案: