React 中的 JSON 到 Dropdown - response.data.map 不是函数

Question

我正在关注代码： https://codesandbox.io/s/cranky-leaf-2hupv?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.js

该示例在我的 React 项目中有效，但是当我尝试时为了使其适应我数据库中的值，我收到错误：

Uncaught (in Promise) TypeError: response.data.map is not a function

我的 JSON 很简单

categories: 
0:  
Id: "22"
Name:   "Strategy"
1:  
Id: "19"
Name:   "Sports"
2:  
Id: "27"
Name:   "Branding"

我已经调整了代码以适合我的JSON 如下：

import React, { Component } from 'react';
import axios from 'axios';


export default class TestDropdown extends React.Component {
    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
            display: "",
            titles: [],
            errorMsg: ''
        };
    }

    toggle() {
        this.setState(prevState => ({
            dropdownOpen: !prevState.dropdownOpen
        }));
    }

    componentDidMount = (e) => {
        axios.get("https://mysite/devapi/categories.php").then((response) =>
            this.setState({
                titles: response.data.map(({ Name }) => Name), /*error*/
                display:
                    response.data[Math.floor(Math.random() * response.data.length)].title
            })
        );
    };

    render() {
        const { display, titles } = this.state;
        return (
            <div className="container">
                <select defaultValue={display}>
                    {titles.map((Name) => (
                        <option key={Name} value={Name}>
                            {Name}
                        </option>
                    ))}
                </select>
            </div>
        );
    }
}

我考虑过我是否因不访问“类别”而读取了错误的 JSON 值而犯了错误，或者这是否与地图/列表有关。 我只需要名称值来填充选项。

来自初学者的衷心感谢。

Answer 1

您可以尝试执行类似

response?.data?.map(({ Name }) => Name)

或 的

response && responese.data && response.data.map((element, index) => {
   console.log('My data', element) // here you should see your data
})

操作来确保我们拥有该数据

玩得开心！

Answer 2

通过检查响应的长度response.data.map不是函数错误将被删除

response.data.length > 0 && response.data.map((element, index) => {
console.log('My data', element) // here you should see your data
})