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

【问题标题】：React Cannot read property 'setState' of undefined in if-blockReact无法读取if块中未定义的属性'setState'
【发布时间】：2021-01-24 07:05:11
【问题描述】：

我正在创建我的第一个 ReactJS 前端应用程序，但遇到了问题。当我尝试用这个调用我的 setState 函数（或任何其他函数）时。在 if 块内之前，我得到了错误。

未处理的拒绝 (TypeError)：无法读取属性“setState”的未定义

当我调用 didComponentMount() 中的函数时，一切都很好，所以我认为问题出在 if 块上。我已经针对不同的问题尝试了几种解决方案，但没有一个有 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();
    }

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

【问题讨论】：

标签： javascript reactjs this webstorm setstate

【解决方案1】：

在您的getFilteredTrades 和getAllTrades 函数中this 指的是函数本身而不是对象，并且这些函数没有成员setState。

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

通过编写getFilteredTrades = () => { ... } 和getAllTrades = () => { ... } 将它们声明为不绑定this 的箭头函数。
通过在构造函数中写入this.getFilteredTrades = this.getFilteredTrades.bind(this) 和this.getAllTrades = this.getAllTrades.bind(this) 将函数的this 关键字绑定到类对象。

【讨论】：

这两种解决方案都会导致我的渲染函数出现新错误，说 this.state.trades.map() 不是函数。
好吧，那么您希望this.state.trades 是一个数组，但事实并非如此。检查您从 fetch 函数中获得了什么。
@Peter_Lehnhardt 当我将它记录到我的控制台时，就我而言，它确实显示了一个数组......
你能在拨打this.state.trades.map( ... )之前先拨打console.log(this.state.trades, this.state.trades instanceof Array)吗？
我的错，这根本不是问题。我在第一个获取 url 中输入了错误的“平台”，这就是它没有返回数组的原因。原来你的解决方案有效，谢谢！

【解决方案2】：

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

getAllTrades=()=>{...}

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

【讨论】：