React Native安卓端TextInput快速输入时与状态不同步问题

问题描述 #

开发打字竞速游戏时遇到Android端独有bug：用户完成单词输入并按下空格后，代码将input状态设为空字符串，但此时立刻按下下一个单词的首字母/空格，onChangeText事件会返回清空前的旧状态+新输入字符，而非仅新字符。该问题仅在Android模拟器/真机快速输入时出现，Web端无此问题。

例如输入"It'"后快速输入"s"和空格，日志显示input被设为空后又变为"It's_"，TextInput内部状态未同步更新。曾尝试将onChange中的setInput移至checkInput的条件判断中，试图避免setState批量更新问题，但无效。

解决方案 #

核心问题是Android端TextInput的内部状态与React状态存在异步更新延迟，快速操作时同步不及时。通过useRef直接操作TextInput实例，强制同步内部状态即可解决。

步骤1：添加TextInput引用 #

使用useRef创建TextInput的引用，用于直接调用组件实例方法。

步骤2：修改清空逻辑 #

在需要清空输入框时，先调用TextInput实例的clear()方法强制清空内部状态，再更新React的input状态。

修改后的完整代码 #

import { TextInput, useRef } from 'react-native';

const Race = () => {
  const [input, setInput] = useState("");
  const [wordIndex, setWordIndex] = useState(0);
  const [letterIndex, setLetterIndex] = useState(0);
  const [errorLength, setErrorLength] = useState(0);
  // 创建TextInput引用
  const inputRef = useRef<TextInput>(null);

  const totalIndex = getTotalIndex(wordIndex, letterIndex);

  const onChange = (val: string) => {
    setInput(val);
    checkInput(val);
  };

  const checkInput = (val: string) => {
    const inputLength: number = val.length;
    const answer = wordList[wordIndex].substring(0, inputLength);

    if (val === answer) {
      setErrorLength(0);
      if (val === wordList[wordIndex]) {
        const isLastWord = wordIndex === wordList.length - 1;
        if (isLastWord) {
          setWordIndex(0);
        } else {
          setWordIndex((prev) => prev + 1);
        }
        setLetterIndex(0);
        // 先强制清空TextInput内部状态，再更新React状态
        inputRef.current?.clear();
        setInput("");
      } else {
        setLetterIndex(inputLength);
      }
    } else {
      setErrorLength(inputLength - letterIndex);
    }
  };

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === "ios" ? "padding" : "height"}
    >
      <View style={styles.textContainer}>
        {wordList.map((word, wordIdx) => (
          <Text key={wordIdx}>
            {word.split("").map((letter, letterIdx) => (
              <Text key={letterIdx} style={getStyles(wordIdx, letterIdx)}>
                {letter}
              </Text>
            ))}
          </Text>
        ))}
      </View>
      <TextInput
        // 绑定引用到TextInput组件
        ref={inputRef}
        value={input}
        onChangeText={onChange}
        autoCapitalize="none"
        autoComplete="off"
        autoCorrect={false}
        spellCheck={false}
        importantForAutofill="no"
        autoFocus
        keyboardType="visible-password"
        style={styles.textInput}
      />
    </KeyboardAvoidingView>
  );
};

export default Race;

原理说明 #

Android端的TextInput组件内部维护着自己的输入状态，React的setState是异步操作，快速输入时可能出现React状态还未同步到组件内部，用户的新输入就已经触发了onChangeText，导致旧的内部状态与新输入拼接。通过useRef直接调用clear()方法，可以绕过异步更新，强制清空组件内部的输入状态，确保后续输入基于空值开始。

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