React Native中useState与TextInput联动异常：输入首个字符无响应问题

嘿，这个问题我太熟啦！核心原因是React的useState更新是异步的——你在onChangeText里调用setSearch(value)后，search变量并不会立刻变成新输入的字符，所以紧接着判断search==''时，用的还是更新前的旧值（也就是空字符串），这就导致输入第一个字符时，searching依然被设为false，直到输入第二个字符，才会用上一次的非空search值来判断。

两种解决办法 #

办法一：直接用当前输入的value判断 #

既然value就是输入框的最新内容，咱们直接用它来判断是否为空，不用等search状态更新：

import React, { useState } from 'react';
import { TextInput, View, Text } from 'react-native';
const App = () => {
  const [search, setSearch] = useState('');
  const [searching, setSearching] = useState(false);
  return(
    <View>
      <TextInput onChangeText={(value) => {
        setSearch(value)
        // 直接用当前的value判断，不用依赖旧的search状态
        setSearching(value !== '')
      }} value = { search } />
      { searching ? (
        <Text>Searching</Text>
      ) : (
        <Text>No searching</Text>
      ) }
    </View>
  );
}
export default App

办法二：用useEffect监听search的变化 #

如果后续逻辑更复杂，推荐用useEffect来监听search状态的更新，这样能确保每次search变化后，再同步更新searching：

import React, { useState, useEffect } from 'react';
import { TextInput, View, Text } from 'react-native';
const App = () => {
  const [search, setSearch] = useState('');
  const [searching, setSearching] = useState(false);

  // 监听search变化，同步更新searching
  useEffect(() => {
    setSearching(search !== '')
  }, [search])

  return(
    <View>
      <TextInput onChangeText={(value) => {
        setSearch(value)
      }} value = { search } />
      { searching ? (
        <Text>Searching</Text>
      ) : (
        <Text>No searching</Text>
      ) }
    </View>
  );
}
export default App

这两种方法都能解决你遇到的“首个输入无响应”问题，第一种更直接，第二种更适合后续有复杂状态联动的场景～

内容的提问来源于stack exchange，提问作者Martin La Regina