如何在使用 react hook 的 react native 中使用 TextInput 更改对象数组的特定字符串？

问题描述

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

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

    let passingValue = { problema: '',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>
                    
    )
}

解决方法

创建 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}
/>

,

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

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

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

一个更好的方法，为了在每次迭代时不在整个列表上调用休 setState，是将 renderItem 拆分为独立的组件，而问题作为道具和答案是独立的{{1 }}，并且在调用 state 时传递内部值（需要一些 onSubmit 架构，state-managment（可以使用 libary 实现）或使用本地 form 或 {{ 1}}，如果它只是从组件到 api 的一次调用）