反应打字稿。使用对象填充数组状态的问题

Posted 2023-03-13

【中文标题】反应打字稿。使用对象填充数组状态的问题

【英文标题】：React Typescript. Issues populating an array state with an object

【发布时间】：2021-02-19 05:37:30

【问题描述】：

我有以下对象。

const data = [
    
        key: '1',
        name: 'John Brown',
        date: 'Mon Oct 31 2013 00:00:00 GMT-0700 (PDT)',
        address: 'New York No. 1 Lake Park',
    ,
    
        key: '2',
        name: 'Joe Black',
        date: 'Mon Oct 31 2014 00:00:00 GMT-0700 (PDT)',
        address: 'London No. 1 Lake Park',
    ,
    
        key: '3',
        name: 'Jim Green',
        date: 'Mon Oct 31 2011 00:00:00 GMT-0700 (PDT)',
        address: 'Sidney No. 1 Lake Park',
    ,
    
        key: '4',
        name: 'Jim Red',
        date: 'Mon Oct 31 2010 00:00:00 GMT-0700 (PDT)',
        address: 'London No. 2 Lake Park',
    ,
];

还有这个状态

const [usersData, setUsersData] = React.useState([]);

我正在尝试使用组件挂载的 useEffect 设置其数据。

React.useEffect(() => 

        setUsersData(result => [...result, data[0]])
        props.setLoading(false);
    , []);

但是我遇到了 setUsersData 的问题

类型参数 '(result: never[]) => key: string;名称：字符串； 日期：字符串；地址：字符串； []' 不可分配给参数 输入“SetStateAction”。输入'（结果：从不[]）=> 键： 细绳;名称：字符串；日期：字符串；地址：字符串； []' 不是 可分配给类型 '(prevState: never[]) => never[]'。 键入'键：字符串；名称：字符串；日期：字符串；地址：字符串； []' 不能分配给类型 'never[]'。 键入'键：字符串；名称：字符串；日期：字符串；地址：字符串； ' 不可分配给类型 'never'.ts

更新：

这是我目前拥有的。

const data = .... 还是一样

我将 useState 更改为

const [usersData, setUsersData] = React.useState<any[]>([]);

我现在就这样做

React.useEffect(() => 
        setUsersData(result => [...result, data[0]])
        props.setLoading(false);
    , []);

但这种方式只会将 elemtn 0 添加到我的数组中，而我试图添加数据中包含的所有元素

【问题讨论】：

你为什么不做setUsersData([...userData, data[0]])

@WilliamWang 是的，我可以做到，但它是一样的Argument of type 'any[]' is not assignable to parameter of type 'SetStateAction<never[]>'. Type 'any[]' is not assignable to type 'never[]'. Type 'any' is not assignable to type 'never'.

你能附上你的整个代码库吗？

既然你用的是打字稿，试试const [usersData, setUsersData] = React.useState<any[]>([]);

我很困惑你为什么要设置这样的状态setUsersData(result => [...result, data[0]])。您想向状态添加什么？

【参考方案1】：

const [usersData, setUsersData] = React.useState([]);

这里的问题是打字稿将[] 的类型推断为never[]，这意味着空数组。 因此，要解决问题，您必须指定为useState 提供通用参数的类型：

type Item = 
    key: string,
    name: string,
    date: string,
    address: string,


// It will work even without specifying type here 
const data: Item[] = 
  //


const [usersData, setUsersData] = React.useState<Item[]>([]);

为useState 提供类型告诉打字稿，如果Item 的事件数组现在为空。

【讨论】：

在此之后，我该如何使用 setUsersData ？ ，因为这个setUsersData(result => [...result, data]) 失败了

setUsersData(result => [...result, data[0]]) 或 setUsersData(data) 或 setUsersData(result => [...result, ...data])

【参考方案2】：

因为你使用的是打字稿，你应该做类型定义或者干脆any

try const [usersData, setUsersData] = React.useState<any[]>([]);

React.useEffect(() => 
        setUsersData(result => [...result, ...data])
        props.setLoading(false);
, []);