React .map 使用 Fetch API 返回 undefined答案

【问题标题】：React .map returns undefined with Fetch APIReact .map 使用 Fetch API 返回 undefined
【发布时间】：2019-08-04 19:50:32
【问题描述】：

我希望我的 React render 方法以类似于从 Postman 获得的方式从 API 返回对象。例如：

{
  "meta": {
    "count": 807,
    "countReturned": 10,
    "requestTime": 1552524395,
    "responseTime": 1552524395,
    "responseMs": 7
  },
  "data": [
     {
        "type": "breeds",
        "id": "1",
        "attributes": {
            "name": "Abyssinian"
        },
        "relationships": {
            "species": {
                "data": [
                    {
                        "type": "species",
                        "id": "3"
                    }
                ]
            }
        },
        "meta": []
    },

但我无法使用 .map 生成我想要的对象。这是我的代码：

class Results extends Component {
constructor() {
    super();
    this.state = {
        animals: [],
    };
}

componentDidMount() {
    var url = "https://test1-api.rescuegroups.org/v5/public/animals/breeds?fields[breeds]=name&fields[species]=singular,plural,youngSingular,youngPlural&include=species&options=meta&limit=10";
    const API_KEY = process.env.REACT_APP_API_KEY;

    fetch(url, {
        method: 'GET',
        headers: {
            Authorization: API_KEY,
            'Content-Type': 'application/json'}
    })
    .then(response => response.json())
    .then(data => this.setState({animals: data.results }))
}

render() {
    return (

        <div>
            {this.state.animals.map(animal => <div>{animal.results}</div>)}
        </div>

    )
}
}

export default Results;

感谢任何提示！

【问题讨论】：

then(data => this.setState({animals: data.results }))，根据你的json，里面没有results字段。
我知道！我应该澄清一下，我已经尝试过 data.type 以及更深层次的 data.type.breeds ，它们都会引发错误。我不应该在我的问题中使用结果。

标签： javascript reactjs fetch-api array.prototype.map

【解决方案1】：

如果你确定你得到的 JSON 数据是正确的，那么你可以使用下面的代码循环对象。

 Object.keys(this.state.animals).map((key) => {
    return <div value={key}>{ this.state.animals[key] }</div>
});

【讨论】：

【解决方案2】：

名为'data'的回调方法的参数并不意味着它是响应数据的data属性。

我认为回调应该是

...
.then(response => response.json())
.then(response => this.setState({animals: response.data}))

<div>
  {this.state.animals.map(animal => <div>{animal.type}</div>)}
</div>

【讨论】：

是的，我不明白“数据”是我自己定义的东西。我需要弄清楚如何使密钥正常工作（将您的答案与 Parth Patel 的答案结合起来），但至少我看到了可以使用的数据。谢谢！

【解决方案3】：

我认为这让您感到困惑，因为您的命名约定有点令人困惑。您的 componentDidMount 函数需要如下所示：

componentDidMount() {
    var url = "https://test1-api.rescuegroups.org/v5/public/animals/breeds?fields[breeds]=name&fields[species]=singular,plural,youngSingular,youngPlural&include=species&options=meta&limit=10";
    const API_KEY = process.env.REACT_APP_API_KEY;

    fetch(url, {
        method: 'GET',
        headers: {
            Authorization: API_KEY,
            'Content-Type': 'application/json'}
    })
    .then(response => response.json())
    .then(json => this.setState({animals: json.data }))
}

您需要从响应中拉出data 键，根据您当前的命名，该键将是data.data。

在您的渲染函数中，您将使用您所在州的animals。如果你想要动物的名字，你可以使用以下：

render() {
    console.log(this.state);
    return (

        <div>
            {this.state.animals.map(animal => <div>{animal.attributes.name}</div>)}
        </div>

    )
}

【讨论】：