Axios React - 不设置状态，我做错了什么？

Question

所以这是代码，我只是想使用 axios 获取，然后将响应设置为状态。使用 ES6 箭头函数

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

class FieldValues extends Component {
  constructor (props){
    super(props);
      this.state = {
        todos: []
      }
  }
  componentDidMount() {
    axios.get(`127.0.0.1:8000/api/todos/`)
      .then(res => {
        this.setState({res.data});
      });
  }

  render(){
    console.log(this.state);

  }
}

export default FieldValues;

这是我的本地主机通过 express 和 node 服务 json 的浏览器屏幕截图。

screenshot

还有我的错误 - 承认我已经在这里工作了几个小时是不是很难过？

编译失败

./src/App.js 出错语法错误：意外标记，预期，(15:26)

  13 |     axios.get(`127.0.0.1:8000/api/todos/`)
  14 |       .then(res => {
> 15 |         this.setState({res.data});
     |                           ^
  16 |       });
  17 |   }
  18 | 

Error
 @ ./src/index.js 13:11-27

Answer 1

我猜您从 API 返回的是一组待办事项。在那种情况下，你需要这个：

this.setState({todos: res.data});

setState 调用接收一个对象。创建对象时，需要给每个属性一个名称和一个值。你这样做的方式，你没有给你的属性一个名字。也许您已经看到了这样的代码，而这引起了混淆：

let name = "John";
let obj = {name};

之所以可行，是因为在 ES6 中，他们添加了一个功能，如果您的变量名也恰好是您想要的属性名称，您可以省略 {name: name} 重复。但是，在您的情况下，A) 它是 res 的嵌套属性，因此该技巧不起作用，并且 B) 您希望它被称为 todos.

Axios React - 不设置状态，我做错了什么？

Axios React - not setting state, what am I doing wrong?

reactjs

axios