Reactjs 如何在Typescript的React setState中将项添加到不可变数组中？

我想使用不可变数组来处理状态。并在此列表中添加一项

接口主状态{
列表：只读[]；//定义不可变数组
}
常量组件：React.FC=（）=>{
//默认情况下，使用类型为的不可变数组
const[classes，setClasses]=useState（{list:[]}作为主状态）；
useffect（（）=>{
如果（数据）{
data.forEach（（thing）=>{
setClasses（prevState=>{
//
//调用签名返回类型“{list:never[]；}”和“MainState”不兼容。
//“list.length”的类型在这些类型之间不兼容。
//类型“number”不可分配给类型“0”。TS2345
//
const list=prevState.list.concat（事物）；
返回{list}；
});
});
}
});
// ...
}

---

我认为使用concat是可行的，因为它是最简单、最可接受的方法：

const list = [...prevState.list, thing];

---

最简单、最可接受的方法是：

const list = [...prevState.list, thing];

---

根据您提供的文件：

concat（）方法用于合并两个或多个数组

因此，您需要将数组而不是元素传递给此函数，我想这将起作用：

const list = prevState.list.concat([thing]);

我还看到您的代码正在迭代新的数组并逐个传递元素，为什么不遍历整个数组呢

    if (data) {
        setClasses(prevState => {
          const list = prevState.list.concat(data);
          // or list = [...prevState.list, ...data];
          return { list };
        });
    }

另外，我认为您遗漏了

MainState

中的数组类型，至少使用

any

类型更新它，下面是

number

类型的完整示例：

interface MainState {
  list: readonly number[];
}

const data = [1, 2, 3]

const Component: React.FC = () => {

  const [classes, setClasses] = useState({ list: [] } as MainState);

  useEffect(() => {
    if (data) {
      setClasses(prevState => ({ list: [...prevState.list, ...data]}));
    }
  });

  return <div>{classes}</div>
}

接口主状态{
列表：只读编号[]；
}
常量数据=[1,2,3]
常量组件：React.FC=（）=>{
const[classes，setClasses]=useState（{list:[]}作为主状态）；
useffect（（）=>{
如果（数据）{
setClass（prevState=>（{list:[…prevState.list，…data]}））；
}
});
返回{classes}
}

来自您提供的文档：

concat（）方法用于合并两个或多个数组

因此，您需要将数组而不是元素传递给此函数，我想这将起作用：

const list = prevState.list.concat([thing]);

我还看到您的代码正在迭代新的数组并逐个传递元素，为什么不遍历整个数组呢

    if (data) {
        setClasses(prevState => {
          const list = prevState.list.concat(data);
          // or list = [...prevState.list, ...data];
          return { list };
        });
    }

另外，我认为您遗漏了

MainState

中的数组类型，至少使用

any

类型更新它，下面是

number

类型的完整示例：

interface MainState {
  list: readonly number[];
}

const data = [1, 2, 3]

const Component: React.FC = () => {

  const [classes, setClasses] = useState({ list: [] } as MainState);

  useEffect(() => {
    if (data) {
      setClasses(prevState => ({ list: [...prevState.list, ...data]}));
    }
  });

  return <div>{classes}</div>
}

接口主状态{
列表：只读编号[]；
}
常量数据=[1,2,3]
常量组件：React.FC=（）=>{
const[classes，setClasses]=useState（{list:[]}作为主状态）；
useffect（（）=>{
如果（数据）{
setClass（prevState=>（{list:[…prevState.list，…data]}））；
}
});
返回{classes}
}

我明白了。我仍然收到以下错误：“（prevState:MainState）=>any[]”类型的

参数不能分配给“SetStateAction”类型的参数。Type'（prevState:MainState）=>any[]”不可分配给Type'（prevState:MainState）=>MainState'。类型“any[]”中缺少属性“list”，但类型MainState中需要属性“list”

，这将解决部分问题：

setClasses（（prevState）：MainState=>（{list:[…prevState.list，CLASS]}）。但是在返回箭头函数的列表中，我再次收到
类型“number”不能分配给类型“0”
。我明白了。我仍然收到以下错误：“（prevState:MainState）=>any[]”类型的
参数不能分配给“SetStateAction”类型的参数。Type'（prevState:MainState）=>any[]”不可分配给Type'（prevState:MainState）=>MainState'。类型“any[]”中缺少属性“list”，但类型MainState中需要属性“list”
，这将解决部分问题：
setClasses（（prevState）：MainState=>（{list:[…prevState.list，CLASS]}）。但是，在返回箭头函数的列表中，我再次收到
类型'number'不可分配给类型'0'
。在
返回{list}中收到消息：
类型“从不[]”不可分配给类型“只读[]”。属性“length”的类型不兼容。类型“number”不可分配给类型“0”。
Updated answer，在
return{list}上的状态定义receive中没有数组类型消息：
类型“从不[]”不可分配给类型“只读[]”。属性“length”的类型不兼容。类型“number”不可分配给类型“0”。
Updated answer，您的状态定义中没有数组类型