如何使用 React Hook 在 React Native 中使用 TextInput 更改对象数组的特定字符串？

Question

我创建了一个按钮，只要被触摸，它就会添加这个对象，{problema: '', solucion: '', key: Math.random(), index: index+1}，到这个useState数组，const [data, setData] = useState([])。常量数据用于包含两个 TextInput 的 Flatlist，一个用于更改字符串问题，另一个用于更改字符串解决方案。我的问题是，当您多次触摸按钮时，常量数据将包含多个对象，我不知道如何根据您使用的 TextInput 更改该特定字符串。

{
    
    let [index, setIndex] = useState(-1);

    let passingValue = { problema: '', solucion: '', key: Math.random().toString(), index: index+1  }

    const [data, setData] = useState([])

    const onPressPlus = () => {
        setIndex(index + 1)
        setData(prevState => [...prevState, passingValue])
        console.log(data);
    } 

    return (
       
        <View>

            <TouchableOpacity onPress={onPressPlus}>
                <AntDesign name='pluscircle'/>
            </TouchableOpacity>

            <View>
                <FlatList
                    data={data}
                    renderItem={itemData => (
                        <View style={{ flexDirection: 'row', }}>
                            <View> 
                                <TextInput
                                    placeholder="Escribe tu problema"
                                    placeholderTextColor='black'
                                    value={itemData.item.problema}
                                    onChangeText={(e) => { /* I dont know how to change the value of this specific itemData.item.problema with setData()*/ }}
                                    multiline={true}
                                    numberOfLines={2}
                                />
                            </View>
                            <View>
                                <TextInput
                                    placeholder="Escribe tu problema"
                                    placeholderTextColor='black'
                                    value={itemData.item.solucion}
                                    onChangeText={(e) => { /* I dont know how to change the value of this specific itemData.item.solucion with setData() */ }}
                                    multiline={true}
                                    numberOfLines={2}
                                />
                            </View>
                        </View>
                        )}
                    keyExtractor={itemData => itemData.key}
                />   
            </View>
        </View>
                    
    )
}

Answer 1

创建 2 个状态来保存 2 个输入字段的值

const [data, setData] = useState([])

const [problem, setProblem] = useState('')
const [solution, setSolution] = useState('')

您使用以下 2 个函数来获取输入字段的值

const onChangeProblem = e => {
    value = e.target.value
    setProblem(value)
}

const onChangeSolution = e => {
    value = e.target.value
    setSolution(value)
}

按如下方式传递此函数

<TextInput
    ...
    onChangeText={onChangeProblem}
/>
...
<TextInput
    ...
    onChangeText={onChangeSolution}
/>

Answer 2

直接的解决方法是将renderItem的索引传递给函数，并覆盖数组

onChangeText={str => setData(prev => {
                       prev[itemData.index] = { ...prev[itemData.index],solucion: str }
                       return prev
                       }
      }

无论如何，您似乎希望将类似 obj 的数据存储在数组中（具有 key 值），请考虑将您的数据视为对象，并呈现 FlatList of Object.entries

为了不在每次迭代的整个列表中调用 hugh setState，更好的方法是将 renderItem 拆分为独立的组件，而问题作为 prop 出现，答案是独立的 state，并且在调用 onSubmit 时传递内部值（需要一些 state-managment 架构，form（可以使用库实现）或使用本地 ref 或context，如果它只是一次从组件调用 api)

如何使用 React Hook 在 React Native 中使用 TextInput 更改对象数组的特定字符串？

How can I change a specific string of an array of objects with TextInput in react native using react hook?

reactjs

react-native

react-native-flatlist

react-native-textinput

use-state