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();
  }, []);
相关推荐
wordbaby几秒前
TanStack Router 基于文件的路由
前端
wordbaby5 分钟前
TanStack Router 路由概念
前端
wordbaby7 分钟前
TanStack Router 路由匹配
前端
cc蒲公英8 分钟前
vue nextTick和setTimeout区别
前端·javascript·vue.js
程序员刘禹锡13 分钟前
Html中常用的块标签!!!12.16日
前端·html
我血条子呢23 分钟前
【CSS】类似渐变色弯曲border
前端·css
DanyHope24 分钟前
LeetCode 两数之和:从 O (n²) 到 O (n),空间换时间的经典实践
前端·javascript·算法·leetcode·职场和发展
hgz071025 分钟前
企业级多项目部署与Tomcat运维实战
前端·firefox
用户18878710698425 分钟前
基于vant3的搜索选择组件
前端
zhoumeina9925 分钟前
懒加载图片
前端·javascript·vue.js