reactjs - TextInput 清除时速度慢，屏幕上有很多内容

Question

我有一个问题，当我在 TextInput 中输入垃圾邮件并单击按钮提交并清除文本时，它变得迟缓并且不会立即清除 TextInput 中的文本。当我在屏幕中有很多内容(如 Lorem Ipsum 文本)时会发生这种情况。

这对我来说是个问题，因为我正在开发一个聊天应用程序，每当聊天日志很大并且用户快速键入和提交消息时，它不会立即被清除，并且仍会保留在 TextInput 中，这是可用性差。我用 ref 和控制的 TextInput 试了一下(没有区别)。

你可以在我的 gif 中看到这个问题:

这里有一个 expo 重现问题的点心: https://snack.expo.io/s22hVf140

这是我的代码:

我的消息:

const MyMessages = () => {
  const [messages, setMessages] = useState([]);

  const addMessage = (text) => {
    const arr = [text, ...messages];
    setMessages(arr);
  };

  return (
    <View>
      <MyTextInput addMessage={addMessage}></MyTextInput>
      {messages.map((msg, i) => {
        return <Text key={i}>{msg}</Text>;
      })}
      <Text>
        Lorem ipsum.......
      </Text>
    </View>
  );
};

我的文本输入:

const MyTextInput = ({ addMessage }) => {
  const [text, setText] = useState("");
  const myRef = useRef();
  const submit = () => {
    myRef.current.clear();
    addMessage(text);
  };

  return (
    <View>
      <TextInput
        ref={myRef}
        style={{
          width: "100%",
          height: 50,
          backgroundColor: "lightgrey",
          marginTop: 50,
        }}
        onChangeText={(text) => setText(text)}
      ></TextInput>
      <Button title="submit" onPress={submit}></Button>
    </View>
  );
};

有人知道为什么屏幕上的大内容会发生这种情况吗？

Answer 1

由于 submit 和 onChangeText 回调在键盘敲击和单击“提交”按钮同时发生时同时触发，所以我对 submit 进行了去抖动> 回调以 100 毫秒的延迟运行。

参见 expo snack .

use-debounce库提供了一个优雅的解决方案来处理此类用户输入事件。

我还消除了对 ref 的需求，方法是通过传递 value={text} 属性控制 TextInput。

至于为什么 TextInput 没有 clear() 而 addMessage() 被成功调用(没有去抖动)，我不知道有一个解释的时刻。很想知道是否有人可以指出。

未能解决问题

在对我的物理设备进行更多测试后，我偶尔会观察到不想要的行为。