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中获取的是ToDos数组。在这种情况下，你需要这个：

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

setState调用接收一个对象。创建对象时，需要为每个属性指定名称和值。按照您的方式进行操作，您不会给您的财产命名。也许您已经看过这样的代码并导致混淆：

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

这样做的原因是因为在ES6中他们添加了一个功能，如果你的变量名也恰好是你想要的名称，你可以省略{name: name}重复。但是，在你的情况下，A）它是res的嵌套属性，因此技巧不会起作用，而B）你希望它被称为todos。

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

1 个答案: