Javascript React本机状态更新1次按键延迟

我正在为输入进行自动完成。我有一个输入，它调用

queryText

函数

onChangeText

。

queryText

接收一个字符串和一个数组，它使用与传递的字符串匹配的字符串创建一个新数组并更新状态。问题是我的状态更新晚了。 在下面的代码中，如果我键入字母“w”，我将返回整个poi数组，而不仅仅是沃尔玛。但如果我在只得到沃尔玛后输入“b”（我应该什么也得不到）。如果我删除“b”，我得到一个空数组（我应该得到沃尔玛）。我的自动完成状态好像落后了1个按键

export default function IndoorForm() {
  const poi = ["test1", "test2", "test3", "walmart"]

  const [value, onChangeText] = React.useState('');
  const [autocomplete, setAutocomplete] = React.useState([...poi]);
  const [query, setQuery] = React.useState('');

  const queryText = (text, poi) => {
    let sanitizedText = text.toLowerCase();
    const queryResult = poi.filter(location => location.includes(sanitizedText) !== false);
    setAutocomplete([...queryResult]);
    onChangeText(text);
    console.log("-----New Text----")
    console.log(queryResult); //this is displaying the correct array
    console.log(text);
    console.log(autocomplete); //this value is 1 behind what is expected
  }

return (
          <TextInput
              key={autocomplete}
              style={styles.input}
              onChangeText={text => queryText(text, poi)}
              value={value}
          />
);
}

导出默认函数IndoorForm（）{
常量poi=[“test1”、“test2”、“test3”、“沃尔玛”]
const[value，onChangeText]=React.useState（“”）；
const[autocomplete，setAutocomplete]=React.useState（[…poi]）；
const[query，setQuery]=React.useState（“”）；
常量queryText=（文本，poi）=>{
让sanitizedText=text.toLowerCase（）；
const queryResult=poi.filter（location=>location.includes（sanitizedText）！==false）；
setAutocomplete（[…queryResult]）；
onChangeText（文本）；
console.log（“----新文本----”）
console.log（queryResult）；//这显示的是正确的数组
console.log（文本）；
console.log（autocomplete）；//此值比预期值晚1
}
返回(
queryText（文本，poi）}
value={value}
/>
);
}

React native可以将多个setState（）调用批处理到一个更新中以提高性能。由于this.props和this.state可能会异步更新，因此不应依赖它们的值来计算下一个状态

此反例将无法按预期更新：

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
})

首选方法是使用函数而不是对象调用setState（）。该函数将接收前一个状态作为第一个参数，应用更新时的props作为第二个参数

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}))

在您的例子中，还应该使用函数而不是对象生成setState（）。有时setstate（）对象不会立即更新和渲染

你检查过这个了吗？