React Typescript - 将字符串数组中的更多元素添加到 useState 数组

Question

有没有办法使用新的字符串数组将更多元素推送或添加到 useState 数组？我只能使用下面的函数添加一个字符串。我尝试循环字符串数组并更新，但它似乎只在最后一个元素时更新 initialList.list 。我需要将字符串数组中的所有元素推送到 initialList.list

const [initialList, setinitialList] = useState({ listName: "List 1", list: ['One', 'Two', 'Three'] });


let multiElements:string[] = ['Four', 'Five', 'Six']

        multiElements.forEach(e => {
          setinitialList({
            listName: initialList.listName,
            list: [...initialList.list, e]
          })
        })

Answer 1

虽然您可以为 setter 使用回调：

setinitialList(initialList => ({

将数组与 concat 合并一次更有意义，而不是同步调用状态 setter 这么多次：

setinitialList({
  ...initialList,
  list: initialList.list.concat(multiElements)
});

就我个人而言，我还建议将状态分开 - 毕竟这些使用的是钩子，而不是 class 状态：

const [list, setList] = useState(['One', 'Two', 'Three']);
const [listName, setListName] = useState("List 1");

那么你只需要做

setList(list.concat(multiElements);

Answer 2

如果你想访问以前的状态，你想传递一个以以前的值作为参数的函数。见 React Hooks API docs.

const [initialList, setInitialList] = useState({
  listName: 'List 1',
  list: ['One', 'Two', 'Three'],
});

// You don't need to type the variable here - TypeScript can infer it
const multiElements: string[] = ['Four', 'Five', 'Six'];

setInitialList((prevState) => ({
  listName: initialList.listName,
  list: [...prevState.list, ...multiElements],
}));

这里的关键是展开之前的状态，同时展开要添加到数组中的multiElements。

React Typescript - 将字符串数组中的更多元素添加到 useState 数组

React Typescript - Add more elements from a string array to useState array

arrays

arraylist

reactjs

react-typescript

use-state