web-dev-qa-db-ja.com

Uncaught（promise）TypeError：undefinedのプロパティ 'setState'を読み取れません

私にとって、このエラーはaxiosを使用している場合によく発生します。未定義のプロパティで状態を設定することはできません。 Eventhough私は実際の応答を得ています。私はかなり混乱しています。どんな解決策もいただければ幸いです。

axios返信によるjson返信

[ { main: 1,
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    cid: 6,
    '$created': '2016-10-21T11:08:08.853Z',
    '$updated': '2016-10-22T07:02:46.662Z',
    stop: 0 } ]

code.js

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
    export default class Main extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                status:[]
            }
        }
        componentDidMount(){

            this.getdata()
        }
        getdata(){
            axios.get('/getactions')
                .then(function (data) {
                    console.log(data.data);

                    this.setState({
                        status:data
                    })
                })
        }

        render(){
            console.log(this.state)
            return(
                <div>
                   <button >Left</button>

                </div>
            )
        }
    }


    ReactDOM.render(<Main/>,document.getElementBy

Id('app'))
javascriptnode.jsreactjses6-promise
9
Nane

標準関数内のthisは通常、関数が作成された場所ではなく、それの呼び出し方法によって決定されます。したがって、ここのコールバック関数のthisは、その外のthisと同じではありません。

getdata(){
    axios.get('/getactions')
        .then(function (data) {
            console.log(data.data);

            this.setState({
                status:data
            })
        })
}

ただし、アロー関数はコンテキストのthisを閉じるため、次のようになります。

getdata(){
    axios.get('/getactions')
        .then(data => {                // <== Change is here
            console.log(data.data);

            this.setState({
                status:data
            })
        })
}
23
T.J. Crowder