React中useState变量dataTemp未定义：如何等待getTemp填充数据？

你的代码里有两个核心问题导致dataTemp始终为undefined：

1. 变量名冲突：let prod = prod.find(...)里的局部变量prod和外层的商品数组重名了，会导致find方法无法正常调用，直接阻断后续逻辑执行。
2. 异步逻辑顺序错误：getTemp是异步请求，setDataTemp更新状态也是异步的，你在调用getTemp后立刻读取dataTemp，此时状态还未更新，自然拿不到新值。

第一步：修正变量名冲突 #

先把局部变量改名，避免和外层数组重名：

let targetProd = prod.find(
  (item) => item.name.toString() === searchParams.get("name")
);

第二步：处理异步逻辑的两种可行方法 #

方法一：在异步回调内直接处理数据

既然getTemp的响应在then回调里才能拿到，直接在这里处理temp的查找和后续逻辑，不用等待状态更新：

useEffect(() => {
  let targetProd = prod.find(
    (item) => item.name.toString() === searchParams.get("name")
  );
  if (targetProd !== undefined) {
    formik.setFieldValue("prod", {
      label: targetProd.name,
      id: targetProd.id
    });

    getTemp(targetProd.id)
      .then((response) => {
        setDataTemp(response);
        // 直接用返回的response处理，无需等待dataTemp状态更新
        let temp = response.find(
          (tempItem) => tempItem.name.toString() === searchParams.get("temp2")
        );
        console.log(temp);
        // 这里可以添加temp的后续业务逻辑
      })
      .catch((error) => {
        // 不要留空catch，至少打印错误便于调试
        console.error("获取temp数据失败:", error);
      });
  }
}, [searchParams, prod, formik]); // 补全依赖数组，避免闭包导致的旧值问题

方法二：监听dataTemp变化，单独处理逻辑

如果temp的处理逻辑复杂，或者需要在dataTemp每次更新时都执行，可以单独加一个useEffect监听dataTemp：

// 原useEffect仅负责获取数据
useEffect(() => {
  let targetProd = prod.find(
    (item) => item.name.toString() === searchParams.get("name")
  );
  if (targetProd !== undefined) {
    formik.setFieldValue("prod", {
      label: targetProd.name,
      id: targetProd.id
    });

    getTemp(targetProd.id)
      .then((response) => {
        setDataTemp(response);
      })
      .catch((error) => {
        console.error("获取temp数据失败:", error);
      });
  }
}, [searchParams, prod, formik]);

// 新增useEffect监听dataTemp的变化
useEffect(() => {
  if (!dataTemp) return; // 确保dataTemp有值再执行逻辑
  let temp = dataTemp.find(
    (tempItem) => tempItem.name.toString() === searchParams.get("temp2")
  );
  console.log(temp);
  // 这里添加temp的后续业务逻辑
}, [dataTemp, searchParams]);

额外注意事项 #

• 给dataTemp设置初始默认值（比如空数组[]），避免find方法在undefined上调用报错：

  const [dataTemp, setDataTemp] = useState([]);
  

• 不要忽略错误捕获，空catch会掩盖请求失败的问题，不利于调试。

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