React Native - Dynami c формирует и обновляет состояние, имеющее массив объектов - PullRequest
Новая
       16

React Native - Dynami c формирует и обновляет состояние, имеющее массив объектов

0 голосов
/ 10 февраля 2020

Как вы обрабатываете несколько полей ввода, когда они отображаются динамически, и обновляете состояние поля ввода на основе индекса. 

const [state, setState] = useState[{value1: '',  value2: ''}]

const handleValue1 = (index, value) => {
  setState(prevObj => ({
    ...prevObj[index],
    value1: value,
  }));
  console.log(state);
}

const handleValue2 = (index, value) => {
  setState(prevObj => ({
    ...prevObj[index],
    value2: value,
  }));
  console.log(state);
}

return (
  <FlatList
    data={DATA}
    renderItem={({item, index}) => (
      <TextInput
        onChangeText={e => handleValue1(index, e)}
        value={state.value1}
      />

      <TextInput
        onChangeText={e => handleValue2(index, e)}
        value={state.value2}
      />
   />
)

Может быть несколько пар TextInput, в зависимости от данных, как мне динамически обновите значения, где в конечном итоге у меня будет: 

[0]: {
  value1: 'some value',
  value2: 'another value',  
},
[1]: {
  value1: 'some value from another update',
  value2: 'another value from another update again',  
}

Проблема в том, что если я обновлю 1 TextInput, все поле TextInput будет обновлено с тем же номером, а затем обновленное состояние сотрет массив, и просто держит 1 объектную пару.

1 Ответ

0 голосов
/ 10 февраля 2020

Просто разобрался ... 

const handleValue1 = (index, value) => {
  state[index] = {...state[index], ['value1']: value};
  /*setState(prevObj => ({
    ...prevObj[index],
    value1: value,
  }));*/
  console.log(state);
}

const handleValue2 = (index, value) => {
  state[index] = {...state[index], ['value1']: value};
  /*setState(prevObj => ({
    ...prevObj[index],
    value2: value,
  }));*/
  console.log(state);
}

Ибо кому-то еще, кому это может быть интересно.

...