Question

在从状态属性检索的数组上使用时，map函数不起作用。

这是我在班级中定义状态的方式：

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

在我的render方法中，我尝试像这样使用groups数组：

const groups = this.state.groups;

在render方法的return语句中，我调用groups.map()

但是，我收到一条错误消息，说map（）对于组是无效的函数。

但是，当我将状态数组完全设置为状态之外时：

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

地图功能可以正常工作。因此，看来this.state.groups实际上并没有访问状态中的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;

Answer 1

您的测试json被解析为一个对象，您无法map进行处理（至少，没有第三方库提供map该对象适用于{{ 1}}的{{1}}）。如果将其更改为lodash，则应该可以使用。

从状态对数组使用映射函数

1 个答案: