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

Question

我正在创建我的第一个 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() {        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

在您的getFilteredTradesand getAllTradesfunctions中this，指的是函数本身而不是对象，并且这些函数没有 member setState。

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

1. 将它们声明为不this通过编写getFilteredTrades = () => { ... }和绑定的箭头函数getAllTrades = () => { ... }。

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

Answer 2

似乎，你在某个时候失去了背景。尝试绑定您的方法或使它们成为箭头函数：

getAllTrades=()=>{...}

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