使用 textInput 和函数组件在本机反应中更改数组对象值答案

【问题标题】：Change array object value in react native with textInput and function component使用 textInput 和函数组件在本机反应中更改数组对象值
【发布时间】：2021-12-23 18:47:18
【问题描述】：

大家好，我想问一下在 react native 中输入文本输入时更改数组值的问题

const [rad, setRad] = useState([
  { value: 'a', status: false, title: 'ab },
  { value: 'b', status: false, title: 'ac' },
  { value: 'c', status: false, title: 'ad' },
]);


<TextInput 
  numberOfLines={2} 
  placeholder="note"
  onChangeText={(text) => setRad([...rad[3], { value: text }])}
/>

但是当我输入错误屏幕时，会出现消息“传播不可迭代实例的尝试无效。为了可迭代，非数组对象必须有一个 Symbol.iterator 方法'

我该怎么办？

【问题讨论】：

我不确定您是否尝试使用[..rad[3], { value: text}] 更新数组状态rad 上的第三项。您能否阐明您想要更新每个对象的所有值或基于某些id 或title 的特定对象。更多关于您要实现的目标的背景信息会有所帮助

标签： javascript arrays reactjs react-native react-hooks

【解决方案1】：

初始状态是一个长度为 3 的数组，即索引为 0、1 和 2，因此尝试传播 ...rad[3] 是尝试传播第四的代码em> 元素，这是一个未定义的值。

您可能打算将之前的 rad 状态数组传播到新的数组引用中并附加新的文本值。在 React 状态下更新数组时，建议使用功能状态更新来确保从之前的状态进行更新，而不是在任何回调/处理程序范围内关闭状态的值。

<TextInput 
  numberOfLines={2} 
  placeholder="note"
  onChangeText={(text) => setRad(rad => [...rad, { value: text }])}
/>

【讨论】：