Блог

Функция map не работает при использовании с массивом, который извлекается из свойства state .

Вот как мое состояние определяется в классе:

   state = {
    isLoading: true,
    groups: []
  };
  

Внутри моего метода рендеринга я пытаюсь использовать массив groups следующим образом:

 const groups = this.state.groups;
  

Внутри моего оператора return в методе render я вызываю groups.map()

Однако я получаю сообщение об ошибке, в котором говорится, что map() является недопустимой функцией для групп.

Однако, когда я полностью устанавливаю массив групп вне состояния, вот так:

    let groups = [];
   groups = this.state.groups;
  

Функция map работает просто отлично. Похоже, что this.state.groups на самом деле это не доступ к массиву групп в состоянии. Как я могу получить доступ к массиву из состояния?

Вот мой полный файл:

 import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  state = {
    isLoading: true,
    groups: []
  };

  async componentDidMount() {
    //const response = await fetch('/api/groups');
    //const body = await response.json();
    const testJson = '{"id" : "1", "name" : "Denver"}';
    const body = JSON.parse(testJson);
    this.setState({ groups: body, isLoading: false });
  }

  render() {
    const {groups, isLoading} = this.state;

    if (isLoading) {
      return <p>Loading...</p>;
    }

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <div className="App-intro">
            <h2>JUG List</h2>
            {groups.map(group =>
              <div key={group.id}>
                {group.name}
              </div>
            )}
          </div>
        </header>
      </div>
    );
  }
}

export default App;
  

Ваш тестовый json анализируется в объект, который вы не можете map переопределить (по крайней мере, без сторонней библиотеки для предоставления a map , которая работает для объектов, таких как lodash ‘s _.map ). Если вы измените это на const testJson = '[{"id" : "1", "name" : "Denver"}]' , это должно сработать.