如何使用反應鈎子更新 object 中的嵌套值

Question

我正在嘗試使用鈎子更新嵌套的鍵和值對。

我通過獲取 API 將數據設置在 useEffect 中，並且運行良好。

const [data, setData] = useState([]);

數據是 object，它看起來像這樣

data
  --- Member
       --- name_1
       --- name_2
       --- mobile
       --- zipcode
  --- id2
  --- id3

我有這樣的輸入框

<input name="name_1" className={form.fm_text_m} required value={data.Member.name_1} onChange={handleChange}/>

更新 state 我創建了 handleChange

const handleChange = (e) => {
    let name = e.target.name;
    let value = e.target.value;
    setData({
      ...data,'Member':{
        ...data['Member'], name:value
      }});
  }

當我嘗試更改輸入框時，我無法在輸入框中添加/刪除文本。

但是如果我用這個替換 setData ->

setData({
      ...data,'Member':{
        ...data['Member'], 'name_1':value
      }});

它工作正常

當我用字符串'name_1'替換名稱變量時，它正在工作，但我想使用變量，這樣我就不必為其他輸入框創建handleChange。 我已經檢查了console.log(name)並且它與 'name_1' 相同

我在這里缺少什么？ 請幫忙。

Answer 1

您必須將name放在方括號中：

const handleChange = (e) => {
    let name = e.target.name;
    let value = e.target.value;
    setData({
      ...data,'Member':{
        ...data['Member'], [name]:value
      }});
  }