如何使用 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?如何使用 React hook 在 React Native 中使用 TextInput 更改对象数组的特定字符串？
【发布时间】：2020-12-20 14:16:40
【问题描述】：

我创建了一个按钮，每当被触摸时，它都会将这个对象 {problema: '', solucion: '', key: Math.random(), index: index+1} 添加到这个 useState 数组 const [数据，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>
                    
    )
}

【问题讨论】：

标签： reactjs react-native react-native-flatlist use-state react-native-textinput

【解决方案1】：

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

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

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

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

【讨论】：

每次我使用 e.target.value 时都会收到 undefined is not an object 的错误。我该如何解决？无论如何感谢您的帮助
对不起，e.target.value是input的网络使用，编辑我的答案

【解决方案2】：

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

【讨论】：