2017-03-16 32 views
0

所以這裏是代碼,我只是想使用axios來獲取,然後設置該狀態的響應。使用ES6箭頭函數Axios React - 沒有設置狀態,我做錯了什麼?

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 
+0

能否在axios成功回調中使用console.log(res.data)來查看是否獲取數據,並且是否只在'render()中記錄狀態 –

回答

1

我猜你在說什麼從API背面是一個數組的ToDos。在這種情況下,您需要:

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

setState調用需要一個對象。創建對象時,您需要給每個屬性一個名稱和一個值。你這樣做的方式,你不給你的財產一個名字。像這樣那樣也許你已經看到的代碼是造成困惑:

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

的作品是因爲在ES6他們增加了一個功能,如果你的變量名也恰好在哪裏成爲你想爲你的屬性名稱的名稱的原因,您可以省略{name: name}重複。在你的情況下,但是,A)它是一個嵌套的屬性res,這樣的伎倆將無法正常工作,和B)你想它被稱爲todos

+0

謝謝BFree,它刪除了錯誤。耶,但我仍然沒有將json數據記錄到控制檯中。我的數組仍然是空的:/請幫助noob – Will

+0

再次感謝,我能夠使用您的指導來實現它的工作 – Will