Запрос на выборку в React: Как отобразить массив объектов JSON, setState () и append? - PullRequest
Новая
       29

Запрос на выборку в React: Как отобразить массив объектов JSON, setState () и append?

0 голосов
/ 11 ноября 2018

Этот API возвращает массив объектов JSON, но у меня проблемы с setState и добавлением. Большая часть документации охватывает объекты JSON с ключами. Ошибка, которую я получаю из функции renderItems (): ItemsList.js:76 Uncaught TypeError: Cannot read property 'map' of undefined

в ItemsList.js 

import React, { Component } from "react";
import NewSingleItem from './NewSingleItem';
import { findDOMNode } from 'react-dom';

const title_URL = "https://www.healthcare.gov/api/index.json";

class ItemsList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // error: null,
      // isLoaded: false,
      title: [],
      url: [],
      descrip: []
    };
  }

  componentDidMount() {
    fetch(title_URL)
      .then(response => {
        return response.json();
      })
      .then((data) => {
        for (let i = 0; i < data.length; i++) {
          this.setState({
            title: data[i].title,
            url: data[i].url,
            descrip: data[i].bite,
          });
          console.log(data[i])   
        }

      })
      .catch(error => console.log(error));
  }

  renderItems() {
    return this.state.title.map(item => {
      <NewSingleItem key={item.title} item={item.title} />;
    });
  }

  render() {
    return <ul>{this.renderItems()}</ul>;
  }
}

export default ItemsList;

Выше я пытаюсь отобразить элементы, но я не совсем уверен, почему я не могу отобразить объекты, которые я установил в setState (). Примечание: даже если в моем setState () я использую title: data.title, это не работает. Может кто-нибудь объяснить, где я ошибаюсь? Спасибо.

в App.js 

import React, { Component } from "react";
import { hot } from "react-hot-loader";
import "./App.css";
import ItemsList from './ItemsList';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1> Hello Healthcare </h1>
        <ItemsList />
        <article className="main"></article>
      </div>
    );
  }
}

export default App;

в NewSingleItem.js 

import React, { Component } from "react";

const NewSingleItem = ({item}) => {
  <li>
    <p>{item.title}</p>
  </li>
};

export default NewSingleItem;

1 Ответ

0 голосов
/ 11 ноября 2018

Проблема в этой строке: 

this.setState({
  title: data[i].title,
  url: data[i].url,
  descrip: data[i].bite,
});

Когда вы указываете от this.state.title до data[i].title, это больше не массив. Вы должны убедиться, что он остается массивом. Возможно, вы все равно не хотите их разбивать, просто храните их все в отдельном массиве: 

this.state = {
  // error: null,
  // isLoaded: false,
  items: [],
};

...


componentDidMount() {
  fetch(title_URL)
    .then(response => {
      return response.json();
    })
    .then((data) => {
      this.setState({
        items: data.map(item => ({
            title: item.title,
            url: item.url,
            descrip: item.bite,
        })
      });
      console.log(data[i])   
    }
  })

...

renderItems() {
  return this.state.items.map(item => {
    <NewSingleItem key={item.title} item={item.title} />;
  });
}
...