如何使用反应钩子更新 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
      }});
  }