React Class组件setState报错：Expected an assignment or function call

这个报错是ESLint的no-unused-expressions规则触发的，说白了就是你代码里有个孤立的表达式——既没赋值给变量，也没用作函数调用，属于无效代码。结合你的场景，大概率是这几个地方出问题：

1. async函数df里有多余的孤立表达式 #

比如你请求到数据后，写了个单独的变量或语句，没任何实际用途：

错误示例： #

async df() {
  const res = await fetch('/你的接口地址');
  const htmlContent = await res.text();
  // 这里多写了一行孤立的表达式，没用
  htmlContent;
  this.setState({ asd: htmlContent });
}

或者用箭头函数时写法出错，比如在then回调里写了不必要的内容，也可能触发这个错误。

2. setState的回调里有无效表达式 #

如果给setState加了回调函数，里面写了没意义的表达式：

错误示例： #

this.setState({ asd: htmlContent }, () => {
  // 这里单独写了个state变量，没赋值也没调用，纯属多余
  this.state.asd;
});

3. dangerouslySetInnerHTML写法错了 #

这个属性要求必须用双层大括号包裹，要是少写一层，里面的__html: ...就成了孤立的对象字面量，也会触发报错：

错误示例： #

// 错在少了一层大括号
<div dangerouslySetInnerHTML={ __html: this.state.asd } />

正确写法： #

<div dangerouslySetInnerHTML={{ __html: this.state.asd }} />

怎么排查解决 #

• 看终端提示的错误行号，直接定位到articles.js对应的代码行，找有没有孤立的变量、语句。
• 把df函数里多余的无效代码删掉，确保每一行都是赋值或者函数调用。
• 检查setState的回调，里面只留有用的操作。
• 确认dangerouslySetInnerHTML是双层大括号的结构。

内容的提问来源于stack exchange，提问作者артур хасанов