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

Posted 2023-02-16

【中文标题】使用 textInput 和函数组件在本机反应中更改数组对象值

【英文标题】：Change array object value in react native with textInput and function component

【发布时间】：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 的特定对象。更多关于您要实现的目标的背景信息会有所帮助

【参考方案1】：

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

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

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