Отправить массив из ответа API на компоненты

Question

Я пытаюсь перехватить URL-адрес wepb из ответа axios и передать его компоненту изображения.

Я хочу просмотреть данные и просмотреть все данные [все] .images.original.webp

Я попытался .map () безуспешно

Я думаю, что некоторые из моих проблем связаны с ожиданием ответа до конца, и UserItem, вероятно, все неправильно

Вотconsole.log Я получаю при устранении неполадок.

Приложение

import React, { Component } from "react";
import axios from "axios";
import Users from "./components/Users";

class App extends Component {
  state = {
    users: [] /* Set users inital state to null */,
    loading: false
  };

  async componentDidMount() {
    this.setState({ loading: true });

    const res = await axios.get(
      "http://api.giphy.com/v1/stickers/search?q=monster&api_key=sIycZNSdH7EiFZYhtXEYRLbCcVmUxm1O"
    );

    /* Trigger re-render. The users data will now be present in 
       component state and accessible for use/rendering */
    this.setState({ users: res.data, loading: false });
  }

  render() {
    return (
      <div className="App">
          <Users loading={this.state.loading} users={this.state.users} />
          {console.log(this.state.users)}
        </div>
      </div>
    );
  }
}

export default App;

Пользовательский компонент

import React, { Component } from "react";
import UserItem from "./UserItem";

export default class Users extends Component {
  render() {
    return (
      <div className="ui relaxed three column grid">
        {this.props.users.map(data => (
          <UserItem key={data.id} gif={data.images.original.webp} />
        ))}
      </div>
    );
  }
}

UserItem

import React from "react";
import PropTypes from "prop-types";

const UserItem = ({ user: { gif } }) => {
  return (
    <div className="column">
      <img src={gif} className="ui image" />
    </div>
  );
};

UserItem.propTypes = {
  user: PropTypes.object.isRequired
};

export default UserItem;

Сообщение об ошибке

Answer 1

Так что мне потребовалось некоторое время, чтобы прочитать о giphy api, но оказалось, что вы, возможно, используете неправильный протокол, http вместо https, поэтому вызов axios фактически выдавал ошибку, и этобыл сохранен в состоянии, так как ваш код не обрабатывает его, то есть state.users не был массив для отображения.

axios.get("https://api.giphy.com/v1/stickers/search?q=monster&api_key=sIycZNSdH7EiFZYhtXEYRLbCcVmUxm1O")

Данные ответа также response.data.data, и ваш UserItemКомпонент просто получает gif как объект, а не объект пользователя.Я закодировал рабочую песочницу.

Answer 2

Визуализируйте вывод в условном выражении, чтобы он не пытался отобразить .map () до того, как массив данных станет доступен.Вероятно, this.props.users - это undefined в первый раз, когда компонент пытается выполнить рендеринг, и поэтому вы получаете фатальную ошибку TypeError.

{this.props.users && this.props.users.map(data => (
    <UserItem key={data.id} gif={data.images.original.webp} />
))}

Выражение && действует как логическое условие при таком использовании.Теперь, когда компонент в первый раз пытается выполнить рендеринг, а this.props.users не определен, он не будет пытаться запустить .map (), когда обновление реквизита и массив будут доступны, он будет рендериться.