React 无法读取 if 块中未定义的属性 'setState'

Question

我正在创建我的第一个 ReactJS 前端应用程序并且运行遇到了问题。当我尝试用它调用我的 setState 函数（或与此相关的任何其他函数）时。在它进入 if 块之前，我得到了错误。

Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined

当我在 didComponentMount() 中调用函数时，一切都很好，所以我认为问题出在 if 块上。我已经针对不同的问题尝试了几种解决方案，但是 none 有一个 if 块，所以它对我不起作用。

抛出错误的函数：

getFilteredTrades() {
        if(document.getElementById("switch").checked){
            fetch("http://localhost:8080/trades/filter?plaform=NintendoSwitch").then(rse => rse.json()).then(
                result => {
                    this.setState({trades: result});
                }
            )
        } else if (document.getElementById("playstation").checked) {
            fetch("http://localhost:8080/trades/filter?platform=PlayStation").then(rse => rse.json()).then(
                result => {
                    this.setState({trades: result});
                }
            )
        } else if (document.getElementById("xbox").checked) {
            fetch("http://localhost:8080/trades/filter?platform=XBox").then(rse => rse.json()).then(
                result => {
                    this.setState({trades: result});
                }
            )
        } else if (document.getElementById("pc").checked) {
            fetch("http://localhost:8080/trades/filter?platform=PC").then(rse => rse.json()).then(
                result => {
                    this.setState({trades: result});
                }
            )
        } else {
            alert("No filter is selected, so all trades will be displayed.")
            this.getAllTrades();
        }
    }

setState 和 getAllTrades 都会在此处抛出错误。

getAllTrades():

getAllTrades() {
        fetch("http://localhost:8080/trades/all").then(rse => rse.json()).then(
            result => {
                this.setState({trades: result});
            }
        )
    }

构造函数：

constructor(props){
        super(props);

        this.state = {
            trades: []
        }
    }

didComponentMount，其中 getAllTrades 起作用：

componentDidMount() {
        this.getAllTrades();
    }

有谁知道这个问题的解决方案吗？提前致谢。

Answer 1

看来，您在某个时候失去了上下文。尝试绑定您的方法或使它们成为箭头函数：

getAllTrades=()=>{...}

如果没有帮助，请尝试将其与上面建议的 self=this 技巧结合使用

Answer 2

在你的getFilteredTrades和getAllTrades函数中this指的是函数本身而不是对象并且那些函数没有成员 setState.

您可以通过两种方式解决问题：

通过编写 getFilteredTrades = () => { ... } 和 getAllTrades = () => { ... }.

this

通过在构造函数中写入 this.getFilteredTrades = this.getFilteredTrades.bind(this) 和 this.getAllTrades = this.getAllTrades.bind(this)，将函数的 this 关键字绑定到 class 对象。

React 无法读取 if 块中未定义的属性 'setState'

React Cannot read property 'setState' of undefined in if-block

javascript

this

setstate

webstorm

reactjs

React 无法读取 if 块中未定义的 属性 'setState'

React Cannot read property 'setState' of undefined in if-block

javascript

this

setstate

webstorm

reactjs

React 无法读取 if 块中未定义的属性 'setState'