React setState异常：清空输入后无法重置错误状态

问题描述 #

需要通过一个React状态处理两种错误场景：

• 当用户未输入搜索词时，状态显示请输入犬种名称；
• 当用户输入不存在的犬种时，状态显示未找到该犬种。

目前的问题是：输入框清空后，状态无法从“未找到该犬种”切换回“请输入犬种名称”。

现有代码 #

// 获取选中犬种的图片
const loadByBreed = async (value: string) => {
  if (!nameOfBreeds.includes(value)) {
    setFetchError("Breed not found")
  };
  
  if(!value && value === "") {
    setFetchError("Please type in a breed name");
    return;
  }

  try {
    const response = await fetch(`https://dog.ceo/api/breed/${value}/images`)
    const data = await response.json()   

    // if (data.message === "Breed not found (master breed does not exist)"  ) {
    //   setFetchError(data.message.slice(0, 16));
    // }

    console.log(data.message)
    setImagesOfABreed(data.message)
    
  } catch (error) {
    const err = error as Error
    console.log(err.message)
  }
}

useEffect(() => { 
  loadByBreed(debouncedQuery);
  // eslint-disable-next-line
}, [debouncedQuery])

问题原因 #

条件判断顺序逻辑错误：当输入框清空时，value为空字符串，第一个判断!nameOfBreeds.includes(value)会先触发（因为nameOfBreeds中不存在空字符串），将错误状态设置为“Breed not found”；虽然后续第二个判断会触发并设置正确状态，但React状态更新的批量处理特性可能导致最终状态被第一个更新覆盖，同时现有逻辑未在输入正确犬种时清空错误状态，导致旧提示残留。

修复方案 #

调整判断顺序，优先处理空输入场景，同时完善错误状态的重置逻辑：

// 获取选中犬种的图片
const loadByBreed = async (value: string) => {
  // 优先处理空输入场景
  if (!value) {
    setFetchError("请输入犬种名称");
    setImagesOfABreed([]);
    return;
  }

  // 处理犬种不存在的场景
  if (!nameOfBreeds.includes(value)) {
    setFetchError("未找到该犬种");
    setImagesOfABreed([]);
    return;
  }

  // 清空错误状态，准备加载新数据
  setFetchError("");

  try {
    const response = await fetch(`https://dog.ceo/api/breed/${value}/images`)
    const data = await response.json()   

    setImagesOfABreed(data.message)
    
  } catch (error) {
    const err = error as Error
    console.log(err.message)
    setFetchError("获取图片失败，请稍后重试");
  }
}

useEffect(() => { 
  loadByBreed(debouncedQuery);
  // eslint-disable-next-line
}, [debouncedQuery])

修复说明 #

1. 调整判断顺序：先校验输入是否为空，直接返回对应错误状态，避免后续无效判断；
2. 清空旧数据：在错误场景下清空图片列表，防止旧内容残留；
3. 重置错误状态：输入正确犬种时先清空错误提示，确保界面状态正确；
4. 完善异常处理：捕获网络等异常情况，给出友好提示。

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