Как обновить глубоко вложенный массив с помощью крючков в react?

#javascript #arrays #reactjs #react-native

#язык JavaScript #массивы #реагирует на #реагировать-родной

Вопрос:

У меня есть вложенный массив объектов, у каждого объекта есть вложенный options массив, подобный этому.

 const [formFields, setFormFields ] = useState({  formTitle: '',  fields: [  {name: 'country', val: '', type: 'radio', options: ['Japan', 'Korea', 'usa'] },  {name: 'state', val: '', type: 'select', options: ['texas', 'florida']},  {name: 'location', val: '', type: 'text', options: []},    ]})

Каждый из элементов во вложенном options массиве должен быть значением в текстовом вводе, которое можно редактировать. Я хочу иметь возможность добавлять/удалять/редактировать эти значения внутри текстового ввода одним нажатием кнопки. Пожалуйста, как я смогу этого достичь?

мой код

 lt;Containtergt;  {formFields.fields.map((field, index) =gt; (  lt;View key={index}gt;  lt;Viewgt;  lt;TextInput  onChangeText={(value ) =gt; {  onChange({name: field.name, value });  }}  value={field.name}  /gt;   lt;/Viewgt;    {(field.type === 'select' || field.type === 'radio') amp;amp; (  lt;gt;  {field.options.map((option) =gt; (  lt;TextInput value={option}   onChangeText={(value ) =gt; {  onChange({name: field.options, ...field.options, value });  }}    /gt;  lt;Text onPress={removeOption}gt;Xlt;/Textgt;  ))}   lt;Button title="add option" /gt;  lt;/gt;  )  }  lt;IconButton  icon="delete"  onPress={handleRemoveField}  /gt;     lt;/Viewgt;   ))}  lt;Button  onPress={handleAddField}  title="Add"    /gt;     lt;/Containtergt;

Ответ №1:

Добавление и удаление реализации:

 onAdd (index,value) {  const fields = formFields.fields.map((field,i) =gt; {   if (i==index) {  const options = [...field.options,value]  return {...field, options}  }  return field  })  setFormFields(  {  ...formFields,  fields  }  ) } onRemove (index,value) {  const fields = formFields.fields.map((field,i) =gt; {   if (i==index) {  const options = field.options.filter((item) =gt; item != value)  return {...field, options}  }  return field  })  setFormFields(  {  ...formFields,  fields  }  ) }

1. Большое спасибо. Это отлично работает. Но как мне изменить значения с помощью onChange? ` {поле.параметры.карта((опция) =gt; ( gt;lt;Значение ввода текста={опция} onChangeText={(значение ) =gt; { onChange({имя: поле.параметры, …поле.параметры, значение }); }} /lt;значение ввода текста={опция} onChangeText={(значение ) =gt;gt; )} `

Ответ №2:

 // in constructor this.onChange = this.onChange.bind(this)  // in class onChange (index,value) {  this.setState(state =gt; {  const fields = state.fields.map((field,i) =gt; {   if (i==index) field.val = value  return field  })  return {  ...state,  fields  }  }) }   // in component  onChangeText( (e) =gt; onChange(index, e.target.value) )

1. Спасибо за это. Но то, что я хотел сделать, — это добавлять и удалять элементы в field.options массиве. И я хочу сделать это с помощью крючков react useState. Я действительно буду рад, если вы сможете помочь с этим.

Ответ №3:

Для изменения стоимости:

 onChange (index,value) {  const fields = formFields.fields.map((field,i) =gt; {   if (i==index) field.val = value  return field  })  setFormFields({  ...formFields,  fields  }) } ... // somewhere in input element lt;TextInput ... onChangeText={(e) =gt; onChange(index,e.target.value)} .. /gt;

1. Кажется, что все в порядке, но я получаю ошибку: неопределенный не является объектом (оценка e.target.value)

2. зависит от поведения TextInput, кажется, что он передает значение без события, в этом случае просто напишите: onChangeText={(значение) =gt; onChange(индекс,значение)}