Javascript 如何更新嵌套状态对象（React JS）的键/值

我试图在用户键入表单时更新状态中嵌套对象的键/值对。我的状态是这样的：

constructor(props) {
super(props);
this.state = {
  details: {
    detail1: {
      title: "",
      description: "",
      image1: null,
      image2: null,
    },
    detail2: {
      title: "",
      description: "",
      image1: null,
      image2: null,
    },
   detail3: {
      title: "",
      description: "",
      image1: null,
      image2: null,
    },
  },
};

}

这是我的渲染方法：

<form>
      <input
        type="text"
        value={this.state.creatives.creative1.title}
        onChange={(e) => {
          this.setState((prevState) => ({
            creatives: {
              ...prevState.creatives,
              creative1: {
                ...prevState.creatives.creative1,
                title: e.target.value,
              },
            },
          }));
          console.log(this.state.details.detail1.title);
        }}
      ></input>
    </form>

{
this.setState（（prevState）=>({
创意：{
…有创造力的人，
创意1：{
…prevState.creatives.creative1，
标题：e.target.value，
},
},
}));
log（this.state.details.detail1.title）；
}}
>

---

我试图在onChange方法中更新键/值，但控制台说我不能在null上调用.target。出于某种原因，event.target返回null，我不知道为什么。如果有人有更好的解决方案来添加键入的值以更新状态，请提供帮助。

传递给onChange的事件是一个合成事件。您不能以异步方式使用此类事件，因为React将重用该事件

setState

以异步方式调用updater函数。如果将事件值存储在常量中，并在

setState

中访问该常量，则它应该可以工作

---

你试过

console.log（e，e？.target）

@ZohaibIjaz是的，我试过了。它可以工作，它可以控制台日志，但当我在setState方法中这样做时，它会抛出相同的错误，即不能读取null值。谢谢！这解决了问题，但当我记录状态时，它落后最后一个字符？原因可能是什么？我已经将控制台日志放在onChange方法中，所以每次我们键入它都会记录日志。我看不出原因，也许可以尝试使用

e.currentTarget.value

？

onChange={(e) => {
   const value = e.target.value
   this.setState((prevState) => ({
       creatives: {
          ...prevState.creatives,
          creative1: {
            ...prevState.creatives.creative1,
            title: value,
          },
        },
      }));
      console.log(this.state.details.detail1.title);
    }}