将数组从API响应发送到组件

Question

我正试图从axios响应中捕获wepb网址，并将其传递给图像组件。

我想遍历数据并显示每个数据[all] .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（），而当props更新且数组可用时，它将渲染。