React useState异常：清空搜索框后searchQuery仍保留最后一个字符

问题根源 #

1. 输入框与状态脱节：你的TextInput没有绑定value到searchQuery，导致输入框显示内容和实际状态不一致——用户看到空框，但searchQuery可能被未完成的异步请求覆盖为旧值。
2. 异步请求竞态：Firebase的get()请求是异步操作，当用户快速输入并清空时，旧的搜索请求可能在清空操作之后才完成，此时会执行setSearchQuery(query)把状态改回旧的输入内容（比如最后一个字符）。

修复方案 #

1. 绑定输入框与状态

给TextInput添加value={searchQuery}，确保输入框显示和searchQuery状态完全同步。

2. 解决异步竞态问题

使用useRef跟踪当前请求的有效性，避免旧请求覆盖新的状态更新。

修改后的完整代码 #

import { useState, useRef } from 'react';
import { View, Text, TextInput } from 'react-native';
import Animatable from 'react-native-animatable';
import AntDesign from '@expo/vector-icons/AntDesign';
import { firestore } from '../firebase/config'; // 替换成你的Firebase配置路径

const SearchComponent = () => {
  const [searchResults, setSearchResults] = useState([]);
  const [searchQuery, setSearchQuery] = useState('');
  const currentRequestRef = useRef(null); // 跟踪当前请求

  const handleSearch = async (query) => {
    // 标记当前请求ID
    const requestId = Date.now();
    currentRequestRef.current = requestId;

    const results = [];
    if (query) {
      // 先更新状态，保证输入框同步
      setSearchQuery(query);
      try {
        const prod = await firestore.collection('products').get();
        // 检查当前请求是否是最新的，避免旧请求覆盖结果
        if (currentRequestRef.current !== requestId) return;

        prod.docs.forEach((doc) => {
          const searchableIndex = doc.data().searchableIndex;
          if (searchableIndex) {
            const lowerCaseQuery = query.toLowerCase();
            if (Object.keys(searchableIndex).some(key => key.includes(lowerCaseQuery))) {
              results.push({
                title: doc.data().title,
                accountNumber: doc.data().accountNumber // 补充原代码中缺失的字段
              });
            }
          }
        });
        setSearchResults(results);
      } catch (error) {
        console.error('Error fetching products:', error);
      }
    } else {
      // 清空时直接重置状态和结果，无需等待异步请求
      setSearchResults([]);
      setSearchQuery('');
    }
  };

  return (
    <>
      <Animatable.View animation={'slideInUp'} duration={800} style={styles.searchContainer}>
        <View style={styles.searchIconContainer}>
          <AntDesign style={{ paddingLeft: 10, color: "#37BD6B" }} name="search1" size={19} />
        </View>
        {/* 添加value绑定，同步输入框与状态 */}
        <TextInput
          onChangeText={(e) => handleSearch(e)}
          value={searchQuery}
          autoFocus={true}
          style={styles.searchBar}
          placeholder="搜索产品"
        />
      </Animatable.View>

      <View>
        {searchResults.map((seller, index) => (
          <View key={index} style={{ backgroundColor: 'grey', padding: 15, marginVertical: 5 }}>
            <Text>{seller.title}</Text>
            <Text>{seller.accountNumber}</Text>
          </View>
        ))}
      </View>
    </>
  );
};

// 补充样式定义
const styles = {
  searchContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#eee',
    borderRadius: 8,
    margin: 10,
    paddingVertical: 8,
  },
  searchIconContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 40,
  },
  searchBar: {
    flex: 1,
    paddingHorizontal: 10,
    fontSize: 16,
  },
};

export default SearchComponent;

额外优化点 #

• 移除了原代码中无逻辑的useEffect，避免不必要的渲染触发。
• 补充了searchResults中缺失的accountNumber字段（原代码map中使用但push时未添加）。
• 添加了输入框占位符和样式补充，提升可用性。

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