React v16.3.2中setState触发TypeError错误求助

嘿，我一眼就揪出问题所在啦！你代码里的一个小语法失误直接把setState方法给覆盖了，导致后续调用时它不再是React提供的内置方法，自然就抛出错误了。

核心错误原因 #

你看这行代码：

this.setState = ({loading: true});

这里你用了赋值操作（=），把this.setState这个React组件的核心方法，直接替换成了一个普通对象{loading: true}。等到后面then和catch里再调用this.setState()时，它已经不是函数了，所以才会触发TypeError。

修复步骤 #

1. 修正setState的调用方式：把赋值改成函数调用，去掉多余的等号：

   this.setState({ loading: true });
   

2. 确认this的绑定（可选但推荐）：虽然这次的核心错误是上面的赋值，但作为React新手，确保事件处理器的this指向组件实例也很关键。你已经尝试过constructor绑定，而你现在用的purchaseContinueHandler = () => {}这种类字段箭头函数的写法，会自动帮你绑定this，所以这部分是没问题的。

修正后的完整代码 #

purchaseContinueHandler = () => {
  // 修正：去掉等号，正确调用setState
  this.setState({ loading: true });

  const order = {
    ingredients: this.state.ingredients,
    price: this.state.totalPrice,
    customer: {
      name: 'Name',
      address: {
        street: 'teststreet 1',
        zipCode: '86753',
        country: 'U.S.'
      },
      email: 'example@example.com'
    },
    deliveryMethod: 'fastest'
  };

  axios.post('/orders.json', order)
    .then(response => {
      this.setState({ loading: false });
    })
    .catch(error => {
      console.error('订单提交失败：', error); // 新增：方便排查错误原因
      this.setState({ loading: false });
    });
};

额外小建议 #

• 如果需要在状态更新后执行逻辑，可以给setState加回调函数：

  this.setState({ loading: true }, () => {
    // 状态更新完成后执行的代码
  });
  

• 可以给加载状态加个UI反馈，比如根据this.state.loading显示Spinner或者禁用按钮，提升用户体验。

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