React Native函数组件中使用TextInput修改数组对象值报错如何解决

报错原因 #

• 你的初始rad数组仅包含3个元素，索引范围为0~2，调用rad[3]得到的是undefined，不属于可迭代类型，对undefined使用展开运算符...就会触发你遇到的报错。
• 另外你初始状态里第一个对象的title: 'ab缺少闭合单引号，需要改成title: 'ab'，否则也会触发语法错误。

对应解决方法 #

你可以根据自己的业务需求选对应写法：

场景1：给rad数组新增第4个元素存储输入内容 #

直接展开原数组，追加新的对象即可，注意保持对象结构和原有元素一致：

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, { value: text, status: false, title: '自定义title' }])}
/>

场景2：修改数组中已有某个元素的value值 #

先拷贝原数组，再修改对应索引对象的属性，避免直接修改原状态：

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) => {
    const newRad = [...rad]
    // 把索引2替换为你实际需要修改的元素下标即可
    newRad[2] = {...newRad[2], value: text}
    setRad(newRad)
  }}
/>

内容的提问来源于stack exchange，提问作者Alek Pacul