TextInput (IOS) : maxLength & multiline true = onChangeText 多次调用

Question

在不同的测试中，我意识到当我的文本达到最大尺寸时，使用 multiline={true} 和 maxLength={200} onChangeText 会被多次调用，这会产生修改给定初始值的效果，例如 这里

Answer 1

等待 api 响应可能会使键盘看起来很慢，并且由于用户仍然可以键入，因此当 api 结果最终更新状态时，它会给您带来奇怪的行为。我认为如果将全局状态与文本输入解耦并仅在 api 调用后更新它会更好（demo）：

import { Text, SafeAreaView, StyleSheet, View } from 'react-native';
import { Card, TextInput } from 'react-native-paper';
import { useState, useCallback, useMemo } from 'react';
import useFetchData from './useFetchData';
import stringSimilarity from 'string-similarity';

// simulate your use case of updating the text input with data
const initialString = 'An aple mobile which is nothing like aple';
// then we set the string to the closest matching product description
const getBestMatch = (str, list) => {
  return stringSimilarity.findBestMatch(
    str,
    list.map((l) => l.description)
  ).bestMatch.target;
};

export default function App() {
  const [list, listLoading, listError] = useFetchData();
  const [description1, setDescription1] = useState(initialString);
  const [description2, setDescription2] = useState(initialString);
  // storing the description separately from the textinput
  const apiDescription = useMemo(() => {
    if (list.length > 0 && description2.length)
      return getBestMatch(description2, list);
    return '';
  }, [description2, list]);
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.input}>
        <Text>
          After typing the first character this textinput becomes hard to use
        </Text>
        <TextInput
          placeholder="Weirdness"
          value={description1}
          onChangeText={(text) => {
            const bestMatch = getBestMatch(text, list);
            console.log(bestMatch);
            setDescription1(bestMatch || text);
          }}
        />
      </View>
      <View style={styles.input}>
        <Text>This text input remains usable</Text>
        <TextInput
          placeholder="Some text"
          value={description2}
          onChangeText={setDescription2}
        />
        <Text>
          Updated text:{'\n'}
          {apiDescription}
        </Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  input: {
    marginBottom: 20,
    padding: 10,
  },
});