React: TypeError: null 不是对象（正在评估“event.target.id”）

Question

我正在尝试将表单输入保存到状态对象中。

const [newMovie, setNewMovie] = useState({
    name: "",
    ratings: "",
    duration: "",
  });

const handleChangeEvent = (event) => {
    console.log(event.target.value);
    setNewMovie((prevState) => {
      return { ...prevState, [event.target.id]: event.target.value };
    });
    console.log(newMovie);
  };

这是针对这种形式的调用：

    <form onSubmit={handleFormSubmit}>
      <div className="layout-column mb-15">
        <label htmlFor="name" className="mb-3">
          Movie Name
        </label>
        <input
          type="text"
          id="name"
          placeholder="Enter Movie Name"
          data-testid="nameInput"
          value={newMovie.name}
          onChange={handleChangeEvent}
        />
      </div>
      <div className="layout-column mb-15">
        <label htmlFor="ratings" className="mb-3">
          Ratings
        </label>
        <input
          type="number"
          id="ratings"
          placeholder="Enter Rating on a scale of 1 to 100"
          data-testid="ratingsInput"
          value={newMovie.ratings}
          onChange={handleChangeEvent}
        />
      </div>
      <div className="layout-column mb-30">
        <label htmlFor="duration" className="mb-3">
          Duration
        </label>
        <input
          type="text"
          id="duration"
          placeholder="Enter duration in hours or minutes"
          data-testid="durationInput"
          value={newMovie.duration}
          onChange={handleChangeEvent}
        />
      </div>
    </form>

问题是，当我开始输入第一个单词之后，React 会抛出错误：“TypeError: null is not an object (evaluating 'event.target.id')”和几个警告弹出：

具体错误如下。我不确定为什么会发生这种情况，因为 id 参数在表单中明确定义。谁能帮我解决这个问题吗？

更新 1

记录整个 event.target 显示存在“id”参数（根据我的理解）：

更新 2

尝试提取在调用设置状态函数之前的键和值，但现在我无法在输入字段中输入任何内容。请注意：它说“myKey”没有在任何地方使用，尽管事实上我实际上是在更新状态函数中使用它。

浏览器日志：