Реагировать на выборку и отображение проблемы с данными - PullRequest
Новая
       7

Реагировать на выборку и отображение проблемы с данными

0 голосов
/ 27 марта 2020

Я новичок, чтобы реагировать, и, пытаясь практиковать, я столкнулся с проблемой. Я хочу получить данные из Hacker News и отобразить их содержимое.

Ну, часть выборки в порядке, я получаю URL-адреса, которые я хочу, с контентом, который я хочу. Но когда я пытаюсь показать это, ничего не происходит. Если я регистрирую контент, я вижу его, но я не могу отобразить его в HTML.

У кого-нибудь есть идеи по этому поводу?

Вот код 

setUrls () {

        // Define API base URL
        let baseUrl = "https://hacker-news.firebaseio.com/v0/item/";

        // IDs of stories
        const ids = [22694891,22693792,22696252,22697212,22695174,22660888,22689301,22695264];

        // Empty Array for content
        const cards = []

        for (let i = 0; i < ids.length; i++){
            fetch(baseUrl + ids[i] + ".json")
            .then(response => response.json())
            .then((data) => {
                cards.push(data);  
            })
        }
        this.setState({
            cards: cards
        })
    }

    componentDidMount () {
        this.setUrls();
    }

    render() {
        let cards = this.state.cards;
        console.log(cards)

        return (
            cards.map(card => {
                return (
                    <div>{card.id}</div>
                )
            })
        )
    }

В render (), когда я регистрирую состояние, я вижу его, но тогда HTML пусто.

1 Ответ

2 голосов
/ 27 марта 2020

Я рефакторинг вашего кода. Попробуйте. 

setUrls () {
    // Define API base URL
    let baseUrl = "https://hacker-news.firebaseio.com/v0/item/";

    // IDs of stories
    const ids = [
      22694891,
      22693792,
      22696252,
      22697212,
      22695174,
      22660888,
      22689301,
      22695264,
    ];
    
    ids.forEach((id) => {
      fetch(`${baseUrl}${id}.json`)
        .then(response => response.json())
        .then((data) => {
          this.setState(({ cards }) => ({
            cards: [ ...cards, data ]
          }));
        })
        .catch(({ message }) => {
          console.error(message);
        });
    });
}

componentDidMount () {
    this.setUrls();
}

render() {
    const { cards } = this.state;

    return (
        cards.map(card => (
          <div>{card.id}</div>
        ))
    )
}
...