React中if块调用setState报错：Cannot read property 'setState' of undefined

你遇到的这个错误核心是JavaScript中this的指向问题：

1. 当getFilteredTrades作为普通函数被调用（比如绑定为按钮点击事件）时，函数内部的this默认不会指向React组件实例，而是变成undefined（严格模式下）。
2. 即使getFilteredTrades的this是正确的，fetch的.then回调函数如果用普通函数写法，内部的this也会丢失指向——不过你已经用了箭头函数处理回调，所以主要问题还是出在getFilteredTrades本身的this绑定上。

而componentDidMount是React内置的生命周期方法，React会自动帮我们绑定好this指向组件实例，所以里面调用this.getAllTrades()完全正常。

下面提供几种可靠的解决方式，选一种你习惯的即可：

方法1：在构造函数中手动绑定this #

在组件的constructor里，给需要调用的方法绑定组件实例的this，确保无论方法被如何调用，内部的this都指向当前组件：

constructor(props){ 
  super(props); 
  this.state = { trades: [] };
  // 手动绑定方法的this指向
  this.getFilteredTrades = this.getFilteredTrades.bind(this);
  this.getAllTrades = this.getAllTrades.bind(this);
}

方法2：用箭头函数定义组件方法 #

箭头函数会自动继承外层作用域的this，直接把方法定义成箭头函数形式，就不需要手动绑定了：

// 改用箭头函数定义方法
getFilteredTrades = () => { 
  if(document.getElementById("switch").checked){ 
    fetch("http://localhost:8080/trades/filter?plaform=NintendoSwitch")
      .then(rse => rse.json())
      .then( result => { 
        this.setState({trades: result}); 
      } ) 
  } 
  // 其余代码保持不变...
}

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

你现在直接用document.getElementById操作DOM的方式不符合React的设计理念，推荐用状态管理复选框的选中状态，让数据驱动视图：

1. 在组件state中添加选中平台的字段：

constructor(props){ 
  super(props); 
  this.state = { 
    trades: [],
    selectedPlatform: null // 存储当前选中的平台
  };
  this.handlePlatformChange = this.handlePlatformChange.bind(this);
}

2. 给每个复选框绑定onChange事件，更新state：

<input 
  type="radio" 
  id="switch" 
  name="platform" 
  onChange={() => this.handlePlatformChange("NintendoSwitch")}
/>
<label htmlFor="switch">Nintendo Switch</label>

<!-- PlayStation、Xbox、PC的复选框同理，修改对应的参数即可 -->

3. 实现状态更新方法：

handlePlatformChange = (platform) => {
  this.setState({ selectedPlatform: platform });
}

4. 修改getFilteredTrades根据state判断：

getFilteredTrades = () => { 
  const { selectedPlatform } = this.state;
  if(!selectedPlatform){
    alert("No filter is selected, so all trades will be displayed.")
    this.getAllTrades();
    return;
  }
  // 根据选中的平台发起请求
  fetch(`http://localhost:8080/trades/filter?platform=${selectedPlatform}`)
    .then(rse => rse.json())
    .then( result => { 
      this.setState({trades: result}); 
    } )
}

这种方式能让数据和视图保持同步，避免直接操作DOM带来的潜在问题，更符合React的单向数据流原则。

内容的提问来源于stack exchange，提问作者Pim_vh