如何使用反应钩子和打字稿将对象推送到数组中？

Question

我知道这完全是一个菜鸟问题，很抱歉，但我试图弄清楚在提交表单时我应该如何设法将对象放入状态数组中。谢谢

interface newList {
  name: string;
}

const ListAdder = () => {
  const [listName, setListName] = useState("");
  const [listArray, setListArray] = useState<any>([]);

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

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

    setListArray([...listArray].push(myNewList));
    setListName("");
    console.log(listArray);
  };

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

  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>
    </>
  );
};

Answer 1

问题是您保存的是推送的结果，即新长度，而不是更新后的数组。

setListArray([...listArray].push(myNewList)); // <-- saves result of push, [].length

你可以concat新元素：

setListArray([...listArray].concat(myNewList));

或者只是附加它

setListArray([...listArray, myNewList]);

其他半相关问题，您无法通过控制台记录状态并期望看到它立即更新。

setListArray([...listArray, myNewList]);
console.log(listArray); // <-- still current state

React 状态更新是异步的，因此像这样记录状态只会记录当前渲染周期中的状态而不是 下一个渲染周期的排队状态。如果您想在更新后记录状态，请使用带有依赖关系的 useEffect 挂钩。

useEffect(() => {
  console.log(listArray);
}, [listArray]);