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

Posted 2023-02-22

【中文标题】Axios ReactJS - 无法读取未定义的属性“setState”

【英文标题】：Axios ReactJS - Cannot read property 'setState' of undefined

【发布时间】：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 是另一种解决方案。

【参考方案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 识别元素的方式。由于您的密钥每次都在更改，因此您的组件将在每次渲染时安装和卸载。这对性能不利，并且可能会在未来给您带来更多麻烦。