React Native中如何通过输入框更新对象内items数组的qty值

嘿，作为React Native新手遇到这个问题太正常了，我来帮你搞定！你之前的核心问题是直接修改嵌套state的方式不对，还有setState的语法错误——不能直接在setState里写items[i].qty: qty这种格式，React要求state的更新必须遵循不可变原则，尤其是嵌套对象和数组的场景。

正确实现思路 #

1. TextInput的value简化：不用itemqty[i].qty，因为map循环里已经拿到了当前的item，直接用item.qty就足够简洁。
2. 不可变更新state：由于selectedObject.items是嵌套在state里的数组，我们不能直接修改原数组，必须先创建数组的副本，修改对应索引item的qty值，再通过setState更新整个selectedObject。

修改后的完整代码 #

renderPage() {
  const { items } = this.state.selectedObject;
  return items.map((item, i) => (
    <View style={{margin:15}} key={i}>
      <Text>Name: {item.name}</Text>
      <TextInput 
        style={styles.input} 
        keyboardType='numeric' 
        value={item.qty}
        onChangeText={(qty) => {
          // 1. 复制原items数组，避免直接修改state
          const updatedItems = [...items];
          // 2. 创建当前item的副本，仅更新qty属性
          updatedItems[i] = { ...updatedItems[i], qty };
          // 3. 函数式更新state，确保拿到最新的state值
          this.setState(prevState => ({
            selectedObject: {
              ...prevState.selectedObject,
              items: updatedItems
            }
          }));
        }}
      />
    </View>
  ))
}

关键细节说明 #

• 数组/对象拷贝：用[...items]和{ ...updatedItems[i], qty }创建副本，完全不碰原state，符合React的不可变更新规则，能保证组件正确重新渲染。
• 函数式setState：这里用prevState获取最新的state值，避免了异步更新可能导致的state不一致问题，尤其适合依赖旧state生成新state的场景。
• key属性：给循环渲染的View加上key={i}（如果item有唯一ID，用ID会更稳妥），这是React列表渲染的强制要求，能提升渲染性能并避免异常。

这样修改后，不管后续items数量怎么增加，每个输入框都会精准对应到自己的item，输入的数值也能实时同步到state里啦！

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