React useState更新时提示listRealm已在上层作用域声明的报错如何解决？

你遇到的报错属于变量名阴影冲突：外层作用域已经通过const [listRealm, setListRealm] = useState(...)声明了listRealm变量，而你在setListRealm的函数式更新回调中，又将回调参数命名为listRealm，内层变量覆盖了外层同名变量，触发了@typescript-eslint/no-shadow规则校验。

'listRealm' is already declared in the upper scope @typescript-eslint/no-shadow

• 方案1：最小改动修复
  仅修改setter回调的参数名即可，通常用prev前缀标识更新前的状态，语义更清晰，修改后报错行代码如下：

  setListRealm(prevListRealm => [...prevListRealm, { value: res.id, label: res.name}]);
  

• 方案2：性能优化版修复（更推荐）
  原代码遍历接口返回数组时，每一项都调用一次状态更新方法，会触发多次不必要的重渲染。可以先处理完所有接口数据再一次性更新状态，同时天然避免变量名冲突问题，修改后的完整findList函数如下：

  const findList = async () => {
    const resp = await axios.get(`${apiUrl}`);
    // 先把接口返回数据统一处理为选项格式
    const newOptions = resp.data.map(res => ({ 
      value: res.id, 
      label: res.name 
    }));
    // 一次性合并原有选项和新选项完成状态更新
    setListRealm(prev => [...prev, ...newOptions]);
  };
  

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