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();
  }, []);
相关推荐
一只小bit1 分钟前
Qt MainWindow:主窗口组件的介绍与正确使用
前端·c++·qt
Macbethad17 分钟前
半导体EFEM设备TwinCAT程序设计方案
java·前端·网络
ggaofeng22 分钟前
理解npm的原理
前端·npm·node.js
摘星编程23 分钟前
React Native for OpenHarmony 实战:SnapCarousel 轮播组件详解
javascript·react native·react.js
电商API_1800790524727 分钟前
1688商品详情采集API全解析:技术原理、实操指南与业务落地
大数据·前端·人工智能·网络爬虫
記億揺晃着的那天27 分钟前
Chrome 自动填充“用户名”到普通输入框 - 解决方案
前端·chrome
摘星编程40 分钟前
React Native for OpenHarmony 实战:PagingScroll 分页滚动详解
javascript·react native·react.js
LawrenceLan1 小时前
Flutter 零基础入门(二十一):Container、Padding、Margin 与装饰
开发语言·前端·flutter·dart
96771 小时前
初始web server的认识1---webserver的用途和工作流程
前端
叫我:松哥1 小时前
基于神经网络算法的多模态内容分析系统,采用Flask + Bootstrap + ECharts + LSTM-CNN + 注意力机制
前端·神经网络·算法·机器学习·flask·bootstrap·echarts