【问题标题】：Send Array from API Response to Components从 API 响应向组件发送数组
【发布时间】：2019-11-07 21:05:31
【问题描述】：

我正在尝试从 axios 响应中捕获 webb url 并将其传递给图像组件。

我想遍历数据并显示每个数据[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>
    );
  }
}

用户项目

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;

错误信息

【问题讨论】：

标签： reactjs axios

【解决方案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 作为道具，而不是用户对象。我编写了一个工作沙箱。

【讨论】：

【解决方案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 更新并且数组可用时，它将渲染。

【讨论】：