Question

尝试输出我的列表时出现以下错误未捕获（承诺）TypeError：items.map不是函数

试图使用地图输出我的json列表，但似乎失败了，我知道this.state.data包含myjson，因为我可以console.log它。无法看到为什么我得到这个错误。下面使用react使用外部文件调用json知道它可能是eb基本问题似乎无法使其工作

  JSON CODE

{
"vehicles": [
    {
        "id": "x",
        "modelYear": "98",
        "url": "/api/vehicle/tt",
        "media": [
            {
                "name": "vehicle",
                "url": "/images/1.jpg"
            }
        ]
    },
    {
        "id": "z",
        "modelYear": "99",
        "url": "/api/vehicle/ff",
        "media": [
            {
                "name": "vehicle",
                "url": "/images/2.jpg"
            }
        ]
    },

 ]
}

export const getData = (data) => {

return fetch('http://localhost:9968/api/vehicle')
.then(response => response.json())
.then((data) => {
return response.json()
})

  import { getData } from '../api';

  export default
  class VehicleList extends Component {

constructor(props) {
    super(props);

    this.state = {
        data : null
    }
}

async componentDidMount() {
    let response = await getData();
    this.setState({data: response})
    }

render() {
    if(this.state.data) {
        let items = this.state.data


        return  (
            <div>
            {items.map(item => <h4>{item.id}</h4>)}
            </div>
        )
    }

    return (<h1>Loading...</h1>);
}

}

Answer 1

根据您共享的JSON，其嵌套在vehicles下。您是否尝试过：

{items.vehicles.map(item => <h4>{item.id}</h4>)}

Answer 2

您的数据属于一个对象，位于名为vehicles的键中。看来您需要：

render() {
    if(this.state.data) {
        let items = this.state.data.vehicles


        return  (
            <div>
            {items.map(item => <h4>{item.id}</h4>)}
            </div>
        )
    }

    return (<h1>Loading...</h1>);
}

未捕获（承诺）TypeError：item.map不是使用react的函数

2 个答案: