React Native搜索API实现问题：清空输入框无法显示全部结果的求助

这个问题的核心原因是React的状态更新是异步的：当你在func里调用setSearchInput(searchText)后立刻执行searchAPI()，此时searchInput还没来得及更新成最新的searchText（也就是空字符串），导致API请求还是带着上一次的关键词，结果自然不对。

下面是两种可行的修复方案，你可以根据自己的习惯选择：

方案一：直接将搜索文本传入API调用函数 #

不依赖searchInput状态，直接把func里的searchText参数传给searchAPI，确保每次请求都用最新的输入值：

const func = async (searchText) => { 
  setSearchInput(searchText); 
  // 直接传入当前输入的文本，跳过异步状态更新的等待
  searchAPI(searchText); 
}; 

const searchAPI = async (searchText) => { 
  try { 
    const data = new FormData(); 
    // 使用传入的最新文本，而非状态值
    data.append("string_search", searchText); 
    setActivityIndicatorVal(true); 
    let response = await fetch( 
      "APILINK", { 
        method: "POST", 
        body: data, 
        // 注意：这里原代码拼写错误，应该是headers而非header
        headers: { "Content-Type": "multipart/form-data" }, 
      } 
    ); 
    var json = await response.json(); 
    if (json.status == 1) { 
      setActivityIndicatorVal(false); 
      setList(json.data); 
    } else { 
      setActivityIndicatorVal(false); 
      console.log("Error"); 
      // 只有输入框清空时，才调用全量列表接口
      if (!searchText) {
        getServiceList();
      }
    } 
  } catch (e) { 
    setActivityIndicatorVal(false); 
    Alert.alert("Error", "Error Massage : " + e, [ 
      { text: "Cancel", onPress: () => console.log("Cancel Pressed"), style: "cancel" }, 
      { text: "OK", onPress: () => console.log("OK Pressed") } 
    ]); 
    return; 
  } 
}; 

方案二：用useEffect监听状态变化触发请求 #

把API调用逻辑放到useEffect钩子中，当searchInput状态真正更新完成后再触发请求，这是React处理状态依赖请求的标准方式：

import { useEffect } from 'react';

// 输入变化时只更新状态，不直接调用API
const func = (searchText) => { 
  setSearchInput(searchText); 
}; 

// 监听searchInput的变化，状态更新后自动执行搜索
useEffect(() => {
  searchAPI();
}, [searchInput]); // 依赖项设为searchInput，状态变化时触发

const searchAPI = async () => { 
  try { 
    const data = new FormData(); 
    data.append("string_search", searchInput); 
    setActivityIndicatorVal(true); 
    let response = await fetch( 
      "APILINK", { 
        method: "POST", 
        body: data, 
        // 修复header拼写错误为headers
        headers: { "Content-Type": "multipart/form-data" }, 
      } 
    ); 
    var json = await response.json(); 
    if (json.status == 1) { 
      setActivityIndicatorVal(false); 
      setList(json.data); 
    } else { 
      setActivityIndicatorVal(false); 
      console.log("Error"); 
      // 输入为空时加载全量结果
      if (!searchInput) {
        getServiceList();
      }
    } 
  } catch (e) { 
    setActivityIndicatorVal(false); 
    Alert.alert("Error", "Error Massage : " + e, [ 
      { text: "Cancel", onPress: () => console.log("Cancel Pressed"), style: "cancel" }, 
      { text: "OK", onPress: () => console.log("OK Pressed") } 
    ]); 
    return; 
  } 
}; 

另外还有两个小细节需要注意：

1. 原代码中fetch请求的header拼写错误，应该是headers，这会导致请求头设置无效，已经在上面的代码中修正。
2. 在searchAPI的else分支里，建议增加输入为空的判断再调用getServiceList，避免不必要的全量请求触发。

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