React Native中用React Hooks实现动态增删输入框的问题排查

问题根源 #

你遇到的核心问题是状态更新未触发组件重渲染：点击按钮时函数执行了，但没有通过React的状态机制正确更新输入框列表，导致组件不会自动刷新。只有代码修改触发热重载时，组件才会重新读取状态并渲染新输入框。

解决方案 #

用useState维护输入框的列表状态，通过不可变的方式更新状态（创建新数组而非修改原数组），确保组件能感知到状态变化并重新渲染。

完整实现代码 #

import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';

const DynamicLocationInputs = () => {
  // 用useState管理输入框列表，每个项包含唯一ID和输入值
  const [inputList, setInputList] = useState([{ id: Date.now(), value: '' }]);

  // 添加新输入框
  const addTextInput = () => {
    // 基于旧状态创建新数组，保证状态不可变性
    setInputList(prevList => [
      ...prevList,
      { id: Date.now(), value: '' }
    ]);
  };

  // 移除指定输入框（至少保留一个）
  const removeTextInput = (targetId) => {
    setInputList(prevList => {
      const newList = prevList.filter(item => item.id !== targetId);
      // 确保始终保留至少一个输入框
      return newList.length > 0 ? newList : [{ id: Date.now(), value: '' }];
    });
  };

  // 更新单个输入框的值
  const handleInputChange = (itemId, newValue) => {
    setInputList(prevList => 
      prevList.map(item => 
        item.id === itemId ? { ...item, value: newValue } : item
      )
    );
  };

  return (
    <View style={styles.container}>
      {/* 遍历渲染所有输入框 */}
      {inputList.map(item => (
        <View key={item.id} style={styles.inputRow}>
          <TextInput
            style={styles.input}
            value={item.value}
            onChangeText={(text) => handleInputChange(item.id, text)}
            placeholder="Enter location"
          />
          {/* 输入框数量大于1时显示移除按钮 */}
          {inputList.length > 1 && (
            <TouchableOpacity 
              style={styles.removeBtn}
              onPress={() => removeTextInput(item.id)}
            >
              <Text style={styles.btnText}>-</Text>
            </TouchableOpacity>
          )}
        </View>
      ))}

      {/* 添加按钮 */}
      <TouchableOpacity style={styles.addBtn} onPress={addTextInput}>
        <Text style={styles.btnText}>Add another location</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  inputRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 6,
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  removeBtn: {
    marginLeft: 10,
    backgroundColor: '#ef5350',
    padding: 8,
    borderRadius: 6,
  },
  addBtn: {
    backgroundColor: '#2196f3',
    padding: 12,
    borderRadius: 6,
    alignItems: 'center',
  },
  btnText: {
    color: '#fff',
    fontWeight: '500',
  },
});

export default DynamicLocationInputs;

关键修改点 #

1. 状态管理：用useState初始化输入框列表，每个项带唯一id（避免渲染时key冲突）。
2. 不可变更新：添加/移除输入框时，通过扩展运算符(...)或map/filter创建新数组，而非直接修改原数组。
3. 绑定输入值：每个输入框的值与状态中的对应项绑定，确保输入内容能正确同步。

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