Изменение массива внутри объекта с помощью React Hooks

Question

У меня есть форма, которая выглядит следующим образом:

const virtual_form = {
    name: 'virtual',
    address_info: [
        {
            name: 'a',
            address: '',
        }
    ]
}

Я использую это как состояние по умолчанию моего хука

const [virtualForm, setVirtualForm] = useState(virtual_form)

Я просто предоставляю пользователю изменить address поле.

<div className="input-text-wrapper">
    <TextField
        value={virtualForm.address_info.address}
        name="address"
        onChange={(e) => handleAccessInfoChange(e, 'virtual')} />
</div>

, как указано выше.

Однако в моем handleAccessInfoChange,

const handleAccessInfoChange = (e, type) => {
    console.log(e.target.name, e.target.value, type)
    switch (type) {
        case 'virtual':
            setVirtualForm({...virtualForm, address_info[0]: [...virtualForm.address_info, address: value] })
    }
}

При попытке изменить * появляется синтаксическая ошибка 1017 *. Там написано 'address' is not defined no-undef.

Как я могу сделать так, чтобы правильно влиять только на address?

Answer 1

Вы рассматриваете объект с address и name как массив, но вы не можете назначить массив с этим синтаксисом [address: value]. Он ищет переменную с именем address, но не использует ее в качестве ключа.

Вместо этого сопоставьте ее и измените объект с правильным индексом. У меня нет способа узнать, какой индекс, поэтому я приму 0, как в вопросе:

setVirtualForm({
  ...virtualForm, 
  address_info: virtualForm.address_info.map((info, i) => {
    if (i == 0) {
      return {
        ...info,
        address: value
      }
    }
    return info
  }
})