React .map returns undefined with Fetch API

Question

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

{
  "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;

如有任何提示，我们将不胜感激！

Answer 1

如果您确定您得到的 JSON 数据是正确的，那么您可以使用以下代码遍历该对象。

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

Answer 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>

Answer 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>

    )
}

React .map returns undefined with Fetch API

React .map returns undefined with Fetch API

javascript

reactjs

fetch-api

array.prototype.map