Javascript 地图功能赢得'；反应状态更新后无法工作

大家好，

我有一个

map

函数，它将一个数据数组映射到我所在州的一个数据库中。map函数在第一次加载时工作正常，但当我开始在数组中“推送”数据时，会出现以下错误：

TypeError:无法读取未定义的属性“map”

我不知道下一步该怎么办，因为我完全不知道我做错了什么

我的组成部分：

import React, { Component } from 'react';
import { Button, Table, Input, InputGroup, Container } from 'reactstrap';

import { Person } from './components/Person';
import { getFetch, postFetch } from './utilities/ApiCalls';

export default class App extends Component {
  state = {
    fetchData: null,
    success: undefined,
    name: undefined,
    birthday: undefined
  };

  async componentDidMount() {
    const response = await getFetch('http://127.0.0.1:8000/api/birthday/all');

    this.setState({
      fetchData: response
    });
  }

  addPerson = async () => {
    const { name, birthday, fetchData } = this.state;

    const response = await postFetch('http://127.0.0.1:8000/api/birthday/create', {
      name: name,
      birthday: birthday
    });

    this.setState({
      fetchData: [...fetchData.data, {
        id: response.data.id,
        naam: response.data.naam,
        geboortedatum: response.data.geboortedatum
      }]
    });
  };

  render() {
    const { fetchData } = this.state;

    return (
      <Container>
        <Table>
          <thead>
          <tr>
            <th>Name</th>
            <th>Date</th>
            <th>Age</th>
            <th>Remove</th>
          </tr>
          </thead>
          <tbody>
          {fetchData ? fetchData.data.map((person) => (
              <Person key={person.id} name={person.naam} date={person.geboortedatum}/>
            )) : <Person name="Loading..." date="0"/>
          }
          </tbody>
        </Table>
        <InputGroup>
          <Input type="text" onChange={(e) => this.setState({ name: e.target.value })}/>
          <Input type="date" onChange={(e) => this.setState({ birthday: e.target.value })}/>
        </InputGroup>
        <Button onClick={this.addPerson}>Add Person</Button>
      </Container>
    );
  }
}

import React，{Component}来自'React'；
从“reactstrap”导入{Button，Table，Input，InputGroup，Container}；
从“./components/Person”导入{Person}；
从“./utilities/apicall”导入{getFetch，postFetch}；
导出默认类应用程序扩展组件{
状态={
fetchData:null，
成功：未定义，
名称：未定义，
生日：未定义
};
异步组件didmount（）{
const response=wait getFetch（'http://127.0.0.1:8000/api/birthday/all');
这是我的国家({
获取数据：响应
});
}
addPerson=async（）=>{
const{name，birthday，fetchData}=this.state；
const response=wait postFetch（'http://127.0.0.1:8000/api/birthday/create', {
姓名:姓名,，
生日：生日
});
这是我的国家({
fetchData:[…fetchData.data{
id:response.data.id，
naam:response.data.naam，
geboortedatam:response.data.geboortedatam
}]
});
};
render（）{
const{fetchData}=this.state；
返回(
名称
日期
年龄
去除
{fetchData？fetchData.data.map（（person）=>(
)) : 
}
this.setState（{name:e.target.value}）}/>
this.setState（{生日：e.target.value}）}/>
添加人
);
}
}

---

感谢您的帮助

最初，从渲染方法中，您希望

fetchData

是一个

对象

，其中

数据

是一个数组的键名。但是您的

addPerson

函数将

此.state.fetchData

更改为

数组。

您可以在

addPerson

中将设置状态更新为

fetchData: { data: [...fetchData.data, { id: res.data.id ... }] }

---

非常感谢！这是正确的答案，我将在5分钟内接受，由于Stackoverflow规则，现在无法接受。我不明白我是怎么做错的！既然你的问题已经得到了回答，我就按你的方式发表评论。为什么您将组件didmount定义为asynch？@Falk，因为我正在等待函数。是的，不确定getFetch是如何工作的。更改状态时，将触发重新渲染。你能不能不要连锁反应或是回电？只是以前从未见过，而且想知道。@Falk更新、更好的练习方法是使用

asyncwait

。你可以了解更多有关这方面的信息。它使代码更清晰，更易于阅读。