Uncaught (в обещании) TypeError: items.map не является функцией, использующей реагировать

Question

получить следующую ошибку при попытке вывести мой список Uncaught (в обещании) TypeError: items.map не является функцией

при попытке вывести мой список json с использованием карты, но, похоже, это не удалось, я знаю, что это.state.data содержит myjson, так как я могу его утешить.не могу понять, почему я получил эту ошибку.ниже, используя ответный вызов json с использованием внешнего файла, узнайте, что это может привести к появлению основной проблемы:

  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>);
}