Метод извлечения Reactjs возвращает пустой массив

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

Попробуйте что-то вроде этого .....

Лучше загружать данные после монтирования компонента.Кроме того, здесь нет 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>
    )
   }
}

Answer 2

Прежде всего, нет необходимости хранить ответ.Это происходит из-за значения состояния, которое не отражается в вашем рендере.

1. Вызов функции внутри ответа об успешном выполнении, отображение ответа внутри функции и установка там состояния.

ИЛИ

Поместите приведенный ниже код вне функции рендеринга, присваивая переменной, как показано ниже

const list = this.state.items.map ((r, i) => {return ()}) return ()}

render () {{list}}