this.state.items.map не является функцией. Каким может быть решение?

#reactjs

Вопрос:

Я создаю простой код react, который показывает список данных API. Однако он возвращает мне ошибку «Uncaught TypeError: this.state.items.map не является функцией» в строке 27. Не могли бы вы сказать мне причину? Я просто изменил ключ API и название веб-сайта только по соображениям безопасности. Пожалуйста, помогите!

 import React from "react";

import Form from "./components/Form.js";


const API_KEY = "123123";
class App extends React.Component {
  //initialize state
  state = {
    items: []
  };

  getWeather = async (e) => {
    e.preventDefault();
    const city = e.target.elements.city.value;
    const state = e.target.elements.state.value;
    const api_call = await fetch(`https://test.com/api/events? 
    locationIds=${city},${state}amp;client=${API_KEY}`);
    const data = await api_call.json();
    console.log(data);
    //set the values of the state
    this.setState({
      items: data
    });
  }

  render() {
    const itemList = this.state.items.map(
      (item, index) => 
      <li 
        key={index}>
        {item}
      </li>
    )
    return (
      <div>
        <p>Hello!</p>
        <h1>hi</h1>
        <Form getWeather={this.getWeather}/>
      <ul>
        {itemList}
      </ul>
      </div>
    )
  }
}

export default App;

{data: Array(132), success: true}
data: Array(132)
[0 … 99]
0: {id: 110503, link: ""…}
1: {id: 106100, link: ""..}
2: {id: 109675, link: ""..}

1. перед этим.state.items.map попробуйте зарегистрировать this.state.items , проверьте его массив

2. когда я попробовал console.log(this.state.items), он возвращает мне данные объекта. Однако я не вижу никакого текста (тег li) с моей точки зрения. В чем может быть ошибка?

3. Должно ли это быть похоже на {item.link}, чтобы я мог получить список всех ссылок?

4. Если это объект, у него нет функции .map , вы должны найти правильные данные, которые являются массивом. можете ли вы вставить данные this.state.items в свой вопрос?

5. Он находится в приложении экспорта по умолчанию; Объект выглядит так после записи console.log(this.state.items)

Ответ №1:

Попробуйте сначала проверить состояние.элементы, подобные таким:

 if(this.state.items){
  const itemList = this.state.items.map((item, index) => (
    <li key={index}> {item} </li>
  )
}

1. Я добавил код для проверки, существует ли this.state.tiems, и он возвращает мне данные объекта, как я написал в последнем из моего кода. Однако я не вижу никакого текста из представления. Как вы думаете, в чем проблема?

2. данные.data полностью сработали. но проблема в том, что я проверял неправильные данные

Ответ №2:

getWeather api является асинхронным, что означает, что функция рендеринга вызывается до загрузки данных, следовательно, вам нужна проверка перед запуском функции map

 const itemList = (this.state.items amp;amp; this.state.items.length > 0) ?
this.state.items.map(
    (item, index) =>
    <
    li key = {
        index
    } > {
        item
    } <
    /li>
) : ''

1.Я добавил код для проверки, существует ли this.state.tiems, и он возвращает мне данные объекта, как я написал в последнем из моего кода. Однако я не вижу никакого текста из представления. Как вы думаете, в чем проблема?

2. попробуйте это this.setState({ items: data.data });

3.данные.data полностью сработали. но проблема в том, что я проверял неправильные данные