react 中解决 类型“never”上不存在属性“value”。

在 React 中,当你使用 useState 钩子来管理状态时,TypeScript 会尝试推断你的状态变量的类型。在你的例子中,listchannel 被初始化为一个空数组,因此 TypeScript 推断出 listchannel 的类型是 never[],即一个空数组类型。

由于 never[] 类型的数组没有任何属性,所以当你尝试访问 listchannel[1].value 时,TypeScript 会报错,因为 never 类型上不存在任何属性。

要解决这个问题,你需要明确地告诉 TypeScript listchannel 数组中元素的类型。你可以定义一个接口来描述这些对象,然后将这个接口作为 useState 的泛型参数。

解决办法

复制代码
//给这个数组定义类型
interface Channel {
  value: number;
  label: string;
}


const [listchannel, setListchannel] = useState<Channel []>([]);




  useEffect(() => {
    async function getListchannel() {
      const res = await Listchannel();
      const res1 = res.data.channels.map((item:any) => {
        return { value: item.id, label: item.name };
      });
      setListchannel(res1);
    }
    getListchannel();
  }, []);
相关推荐
遗憾随她而去.14 分钟前
前端首屏加载时间的度量:FCP、LCP等指标的规范理解
前端
TAEHENGV16 分钟前
React Native for OpenHarmony 实战:数学练习实现
javascript·react native·react.js
CDwenhuohuo16 分钟前
安卓app巨坑 nvue后者页面要写画笔绘制功能nvue canvas
前端·javascript·vue.js
弓.长.20 分钟前
React Native 鸿蒙跨平台开发:长按菜单效果
react native·react.js·harmonyos
一只小bit22 分钟前
Qt 事件:覆盖介绍、处理、各种类型及运用全详解
前端·c++·qt·cpp
人道领域36 分钟前
JavaWeb从入门到进阶(前端工程化)
前端
shughui1 小时前
APP、Web、H5、iOS与Android的区别及关系
android·前端·ios
Amumu121381 小时前
React Router 6介绍
前端·react.js·前端框架
弓.长.1 小时前
React Native 鸿蒙跨平台开发:实现一个模拟计算器
react native·react.js·harmonyos
山峰哥1 小时前
SQL调优实战:让查询效率飙升10倍的降本密码
服务器·前端·数据库·sql·编辑器·深度优先