如何更新嵌套 state object (React JS) 的鍵/值

Question

我正在嘗試在用戶輸入表單時更新 state 中嵌套 object 的鍵/值對。 我的 state 看起來像這樣：

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>

我已嘗試在 onChange 方法中更新上述鍵/值，但控制台顯示我無法在 null 上調用.target。 出於某種原因，event.target 返回 null，我不知道為什么。 如果有人有更好的解決方案來添加鍵入的值以更新 state，請提供幫助。

Answer 1

傳遞給 onChange 的事件是一個合成事件。 你不能以異步方式使用這樣的事件，因為 React 會重用該事件。 setState以異步方式調用更新程序 function。 如果您將事件值存儲在一個常量中並在setState中訪問它，它應該可以工作。

https://reactjs.org/docs/events.html

https://reactjs.org/docs/react-component.html#setstate

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