web-dev-qa-db-ja.com

Axios ReactJS-未定義のプロパティ 'setState'を読み取れません

ReactJSで簡単なことをしているときに、「TypeError：プロパティ 'setState'のundefinedを読み取れません」というエラーが発生します。 axiosを使用して入力に応答データを入力しようとしています。これまでのところ成功していません。私はaxiosとReactJの両方にとって非常に新しいので、見落としている非常に単純なものかもしれません。

TypeErrorが修正された後、フォームの入力フィールドに「応答テキスト」が表示されることを期待します。

これは私のコンポーネントです：

class BasicInfoBlock extends React.Component {
    constructor(props) {
        super(props);

        this.state = { name : "EventTestName" };
    }

    componentDidMount() {
        axios
        .get(getBaseUrl()+`get`)
        .then(function (response) {
            this.setState({name: "RESPONSE TEXT"});
            //this.setState({name: response.data.name});
        })
        .catch((e) => 
        {
            console.error(e);
        });
        //this.setState({});
    }


    render(){
        return(
                <form className="form-horizontal">
                    <div className="form-group">
                        <label htmlFor="eventName" className="col-sm-2 control-label">Name</label>
                        <div className="col-sm-10">
                        <input type="text" id="eventName" className="form-control" placeholder="Event name" defaultValue={this.state.name}/>
                        </div>
                    </div>
                </form>
            );
    }
}

ご協力ありがとうございました

編集：これは重複する質問ではありません。この質問は、コールバックで「this」が利用できないことに関連しています。重複として選択された質問はバインドに関連しています。

javascriptreactjsaxios
17
rluks

Promiseのthenメソッドでは、thisはコンポーネントを参照しなくなります。次のような矢印関数を使用して修正できます。

componentDidMount() {
  axios
  .get(getBaseUrl()+`get`)
  .then((response) => {
    this.setState({name: "RESPONSE TEXT"});
    //this.setState({name: response.data.name});
  })
  .catch((e) => 
  {
    console.error(e);
  });
  //this.setState({});
}
38
Ben Nyberg