React Native重渲染致键盘关闭、TextInput无法正常输入问题求助

1. 错误使用index作为列表项key #

用数组索引作为key会导致列表项内容更新时，React无法正确识别组件身份，触发不必要的卸载与重建，直接造成TextInput失去焦点。

修复：使用每个item的唯一标识作为key，比如item.ITEM_TYPE_CD（每个类型唯一）：

<RenderFixtureItem
  key={item.ITEM_TYPE_CD} // 替换index为唯一标识
  item={item}
  index={index}
  onIncrement={handleIncrement}
  onDecrement={handleDecrement}
  onTextChange={onHandleChange}
/>

2. RenderFixtureItem的useCallback缺少依赖数组 #

当前RenderFixtureItem的useCallback未指定依赖项，父组件每次重渲染时，该组件的函数引用都会更新，导致所有列表项强制重渲染，TextInput丢失焦点。

修复：添加正确的依赖数组：

const RenderFixtureItem = useCallback((p) => {
  // 原有组件内容
}, []); // 若用到外部样式变量（如Colors、theme），需加入依赖数组

3. Debounce函数的闭包与依赖错误 #

当前onHandleChange的debounce依赖FinalList，每次列表更新都会重建debounce函数，且闭包会捕获旧的列表状态，导致更新不及时。同时直接使用当前FinalList更新状态，会引发数据不一致问题。

修复：改用函数式更新setFinalList，解除对FinalList的依赖：

const onHandleChange = useCallback(
  debounce((value, index) => {
    setFinalList(prevList => {
      const updatedList = [...prevList];
      const item = {...updatedList[index]};
      // 处理输入值：空字符串保留，有效数字转字符串，无效输入清空
      const newValue = parseInt(value);
      item.NEW_ITEM_CNT = value === '' 
        ? '' 
        : (isNaN(newValue) ? '' : newValue.toString());
      updatedList[index] = item;
      return updatedList;
    });
  }, 300), // 缩短延迟提升输入体验
  []
);

4. 输入过程中强制转数字导致内容重置 #

用户输入时（如输入"123"未完成），parseInt会将临时值转为数字，若输入空字符串会被转为0，导致TextInput内容被强制重置，影响输入体验。

修复：TextInput的value处理空值，避免undefined.toString()报错：

<TextInput
  keyboardType="numeric"
  maxLength={5}
  onChangeText={val => p.onTextChange(val, p.index)}
  style={styles.fixtureTextField}
  value={p.item?.NEW_ITEM_CNT?.toString() || ''} // 处理空值与undefined
/>

额外优化：简化增减函数的状态更新 #

将handleIncrement和handleDecrement改为函数式更新，解除对FinalList的依赖，减少不必要的重渲染：

const handleIncrement = useCallback(index => {
  setFinalList(prevList => {
    const updatedList = [...prevList];
    const item = {...updatedList[index]};
    let count = parseInt(item.NEW_ITEM_CNT || 0);
    if (count < 100000) {
      item.NEW_ITEM_CNT = (count + 1).toString();
      updatedList[index] = item;
    }
    return updatedList;
  });
}, []);

const handleDecrement = useCallback(index => {
  setFinalList(prevList => {
    const updatedList = [...prevList];
    const item = {...updatedList[index]};
    let count = parseInt(item.NEW_ITEM_CNT || 0);
    if (count > 0) {
      item.NEW_ITEM_CNT = (count - 1).toString();
      updatedList[index] = item;
    }
    return updatedList;
  });
}, []);

上述修改可彻底解决TextInput失去焦点、无法输入的问题，同时优化组件重渲染性能。

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