React Native中如何添加动态输入组并维护对应状态？

看起来你在维护动态生成的输入框状态时，踩了几个状态不可变更新和数组结构维护的常见坑，导致状态被意外改成了错误类型（比如字符串数组、数字），进而触发map is not a function这类报错。我来一步步帮你修正：

核心问题分析 #

你的toolsUsed是一个对象数组，但之前的状态更新代码经常直接把它替换成了其他类型（比如[prevState.toolsUsed[i].name, name]是字符串数组，prevState.toolsUsed.length + 1是数字），直接破坏了数组结构，后续的map自然会报错。

1. 修复输入框的状态同步逻辑 #

输入框内容改变时，你需要复制原数组，精准修改对应索引的对象属性，而不是直接替换整个数组。这里推荐用map方法生成新数组，既满足React状态不可变的要求，又能准确更新目标项：

// 示例：更新name属性的onChangeText逻辑
onChangeText={(newName) => {
  this.setState(prevState => ({
    toolsUsed: prevState.toolsUsed.map((tool, index) => {
      // 找到当前输入框对应的工具对象
      if (index === i) {
        return { ...tool, name: newName }; // 复制原对象，修改name属性
      }
      return tool; // 其他项保持不变
    })
  }), () => console.log(this.state.toolsUsed))
}}

count和price的更新逻辑完全同理，只需要把name换成对应的属性即可。

2. 修复加号按钮的添加逻辑 #

你之前的代码要么把数组改成了数字，要么添加了一个数字（newInput是数组长度），完全不符合toolsUsed的结构。正确的做法是添加一个符合初始结构的新对象：

// 把加号按钮放在每组输入框外面，避免重复生成
<TouchableOpacity 
  onPress={() => {
    this.setState(prevState => ({
      toolsUsed: [...prevState.toolsUsed, {
        id: (Math.random() * 150).toString(),
        name: '',
        price: '',
        count: ''
      }]
    }))
  }}
>
  <Text>+</Text>
</TouchableOpacity>

这里用扩展运算符[...prevState.toolsUsed]复制原数组，再追加一个新的工具对象，保证数组结构始终正确。

3. 修复减号按钮的删除逻辑 #

你之前的第一种方式用了pop()（会直接修改原state数组，违反React状态不可变原则），第二种方式可行，但更简洁可靠的方式如下：

方式1：删除当前项（通过id匹配） #

<TouchableOpacity
  onPress={() => {
    this.setState(prevState => ({
      toolsUsed: prevState.toolsUsed.filter(tool => tool.id !== id)
    }))
  }}
>
  <Text>-</Text>
</TouchableOpacity>

方式2：删除最后一项（如果只需要删除末尾） #

<TouchableOpacity
  onPress={() => {
    this.setState(prevState => ({
      // slice(0, -1) 取数组从开头到倒数第二项的所有元素，即删除最后一项
      toolsUsed: prevState.toolsUsed.slice(0, -1)
    }))
  }}
>
  <Text>-</Text>
</TouchableOpacity>

注意：永远不要直接用this.state.toolsUsed.pop()或者splice修改原数组，一定要基于prevState生成新数组，保证状态更新的可靠性。

完整修正后的renderToolsUsed方法 #

renderToolsUsed = () => { 
  const { toolsUsed } = this.state; 
  return toolsUsed.map((tool, i) => { 
    const { name, id, price, count } = tool;
    return ( 
      <View key={id}> {/* 把key放在最外层View上，避免重复用同一key */}
        <View style={styles.toolsItem}> 
          <TextInput 
            onChangeText={(newName) => {
              this.setState(prevState => ({
                toolsUsed: prevState.toolsUsed.map((t, index) => 
                  index === i ? { ...t, name: newName } : t
                )
              }))
            }} 
            value={name} 
          /> 
        </View> 
        <View style={styles.toolsItem}> 
          <TextInput 
            onChangeText={(newCount) => {
              this.setState(prevState => ({
                toolsUsed: prevState.toolsUsed.map((t, index) => 
                  index === i ? { ...t, count: newCount } : t
                )
              }))
            }} 
            value={count} 
          /> 
        </View> 
        <View style={styles.toolsItem}> 
          <TextInput 
            onChangeText={(newPrice) => {
              this.setState(prevState => ({
                toolsUsed: prevState.toolsUsed.map((t, index) => 
                  index === i ? { ...t, price: newPrice } : t
                )
              }))
            }} 
            value={price} 
          /> 
        </View>
        {/* 减号按钮：删除当前组 */}
        <TouchableOpacity
          onPress={() => {
            this.setState(prevState => ({
              toolsUsed: prevState.toolsUsed.filter(t => t.id !== id)
            }))
          }}
        >
          <Text>-</Text>
        </TouchableOpacity>
      </View> 
    ); 
  }); 
}

记得把加号按钮放在render方法的toolsContainer中（而不是每组输入框里），这样只会显示一个全局的添加按钮。

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