Обновление данных по индексу массива javascript и реагирование нативных

Question

В моем приложении Todo я успешно реализовал функции добавления и удаления, но у функции обновления возникли проблемы. То, что мне нужно сделать, это когда я нажимаю на сенсорную непрозрачность Todo, она должна появиться в моем поле ввода, и если будет внесено какое-либо изменение, то это todo должно быть обновлено, например, нажатие на abcd должно привести к тому, что оно появится в поле ввода, и изменения будут внесены в это должно быть обновлено. Изображение также добавлено ниже

export default function Todo() {
  const [getText, setText] = useState('');
  const [getList, setList] = useState([]);

  const addItem = () => {
       setList([...getList, {key: Math.random().toString(), data: getText}]);
       setText('');
    }

  const removeItem = (itemKey) => {  
    setList(() => getList.filter(item => item.key != itemKey));
  }

  const updateFieldChanged = (index) => e => {
    let newArr = [...getList]; // copying the old datas array
    newArr[index] = e.target.value; // replace e.target.value with whatever you want to change it to
    setList(newArr);
}

  return (
    <View style={styles.container}>
      <Text style={styles.title}>todo</Text>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.textInput}
          placeholder="Enter Item"
          onChangeText={text => setText(text)}
          value={getText}
        />
        <CustomButton     
          text = 'add'
          color='red'
          title= 'add'
          textSize={20}
          textColor="white"
          onPressEvent={addItem}

        />
      </View>

      <ScrollView style={styles.scrollview}>
        {getList.map((item, id) =>
          <TouchableOpacity
            key={item.key}
            activeOpacity={0.7}
            onPress= {() => updateFieldChanged(id)}


          >
            <View style={styles.scrollviewItem}>
              <Text style={styles.scrollviewText}>{id}) {item.data}</Text>
                <TouchableOpacity
                  onPress={() => removeItem(item.key)}
              >
                <View style={styles.crosstextcontainer}>
                  <Text style={styles.crosstext}>X</Text>
                </View>
              </TouchableOpacity>


            </View>
          </TouchableOpacity>
        )}
      </ScrollView>
    </View>
  );
}

Answer 1

Изменить

  <TouchableOpacity
            key={item.key}
            activeOpacity={0.7}
            onPress= {() => updateFieldChanged(id)}
          >

на

  <TouchableOpacity
              key={item.key}
              activeOpacity={0.7}
              onPress= {() => updateFieldChanged(id,getText)}
            >

Здесь я передаю текст, который необходимо ввести, чтобы обновить определенное поле

изменить updateFieldChanged как this:

  const updateFieldChanged = (index, text) => {
      let newArr = [...getList]; // copying the old datas array
      newArr[index].data = text; // replace e.target.value with whatever you want to change it to
      setList(newArr);
      setText('');
  }

Здесь я назначаю текст, который вы ввели в TextInput, объекту данных, который обновит массив.

Надеюсь, это поможет!