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]);

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

1 个答案: