Question

我正在尝试将setSet更新为我的RestAPI输出的一部分。但是我收到一个错误消息，即响应对象未定义。我可以将其记录在setState方法之外。

代码

addNewTodo = () => {
axios.post('http://localhost:5001/todos', "task="+this.state.newTodoList.task)
      .then(response=>console.log(response.data))
      .then(response=>{
              this.setState(prevState=>({
                  TodoList: prevState.TodoList.push(response.data),
              }))
            });
{this.toggleNewTodoModal()}
}

我在错误之前先登录控制台

{task：“ ddd”，id：“ todo10”}

错误：

TypeError：无法读取未定义的属性“数据”

在下一行

TodoList：prevState.TodoList.push（response.data），

Answer 1

因此，您的第一个.then返回一个控制台日志，这意味着您的第二个.then将不再具有任何值。如果您将代码更改为此：

关于将新数据推送到反应状态数组，在更高的React版本中，建议的方法是在修改状态以防止竞争条件时使用更新程序功能。因此，将新数据推送到状态数组应该如下所示

axios
    .post('http://localhost:5001/todos', 'task=' + this.state.newTodoList.task)
    .then(response => {
        console.log(response.data);
        this.setState(prevState => ({
            TodoList: [...prevState.TodoList, response.data],
        }));
    });

它应该可以正常工作。您可以随意链接.then，只要您在fetch中返回一些值而不是控制台日志即可，例如：{p>

fetch('some_url', {
  method: 'GET',
})
.then(res => res.json()) // this returns the data 
.then(data => console.log(data)) // this has access to the data

Answer 2

我的状态对象是一张地图，因此以下内容对我有用。状态

  state = {
    TodoList: {},
    }

更新状态

axios
.post('http://localhost:5001/todos', 'task=' + this.state.newTodoList.task)
.then(response => {
  const {id, task} = response.data
    this.setState(prevState => ({
        TodoList: {...prevState.TodoList,
            [id]: task},
    }));
});

ReactJS无法访问setState内的响应对象

2 个答案: