Axios ReactJS - 无法读取未定义的属性“setState”答案

【问题标题】：Axios ReactJS - Cannot read property 'setState' of undefinedAxios ReactJS - 无法读取未定义的属性“setState”
【发布时间】：2017-04-23 21:21:39
【问题描述】：

在 ReactJS 中做一件简单的事情时，我收到一个错误“TypeError: Cannot read property 'setState' of undefined”。我正在尝试使用 axios 用响应数据填充输入。到目前为止没有成功。我对 axios 和 ReactJs 都很陌生，所以我可能忽略了一些非常简单的事情？

我希望“响应文本”在 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”在回调中不可用有关。选择为重复的问题与绑定有关。

【问题讨论】：

Uncaught TypeError: Cannot read property 'setState' of undefined的可能重复
问题在于回调函数内部this的上下文。
不是重复的，阅读编辑
它与this 在另一个函数中丢失上下文的根本问题相同。绑定是一种解决方案，箭头是另一种解决方案，使用像var self = this; 这样的单独变量，然后调用self.setState 是另一种解决方案。

标签： javascript reactjs axios

【解决方案1】：

在 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({});
}

【讨论】：

谢谢，错误消失了。但是我的输入字段仍然没有填写“响应文本”，我不知道为什么。
@rluks 你需要设置value 属性，而不是defaultValue。要消除 React 将抛出的警告，您可以使用空字符串初始化 this.state.value
你设置了 prop defaultValue，而不是 value。默认值只会在装载时设置，而不是在您调用 setState 时设置。我建议阅读有关受控组件的 React 文档。
是的 value 有效，但也 key={this.state.name} 作为输入元素的属性
你不想使用 key 属性。这就是 React 识别元素的方式。由于您的密钥每次都在更改，因此您的组件将在每次渲染时安装和卸载。这对性能不利，并且可能会在未来给您带来更多麻烦。