如何使用React Hooks与TypeScript将对象添加到state数组中

你代码里的核心错误出在更新数组的那一行：setListArray([...listArray].push(myNewList));

错误原因 #

• 数组的push()方法返回值是修改后数组的长度，不是修改后的数组本身。你现在的写法相当于把数字类型的长度赋值给了原本应该存对象数组的listArray，自然达不到预期效果。
• 额外可优化点：你已经定义了newList接口，完全可以给listArray的state加上类型约束，没必要用any，能避免很多类型错误。
• 另外React的state更新是异步的，你在setListArray执行完后立刻打印listArray，拿到的还是更新前的旧值，看不到最新结果。

修正后的代码 #

import { useState, FormEvent, useEffect } from 'react';

interface newList {
  name: string;
}

const ListAdder = () => {
  const [listName, setListName] = useState("");
  // 给state加上正确的类型约束，不用any
  const [listArray, setListArray] = useState<newList[]>([]);

  const submitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    const myNewList: newList = {
      name: listName,
    };

    // 直接展开旧数组+追加新对象，得到新数组传给setter即可
    setListArray([...listArray, myNewList]);
    setListName("");
  };

  const listNameHandler = (e: FormEvent<HTMLInputElement>) => {
    setListName(e.currentTarget.value);
  };

  // 要验证数组更新结果可以监听listArray变化后打印
  useEffect(() => {
    console.log(listArray);
  }, [listArray])

  return (
    <>
      <form onSubmit={submitHandler}>
        <label>Create your List</label>
        <br />
        <input
          type="text"
          placeholder="List name is..."
          value={listName}
          onChange={listNameHandler}
        />
        <button type="submit">Add the List</button>
      </form>
    </>
  );
};

内容的提问来源于stack exchange，提问作者Mugi