Reactjs React发出两个异步请求并传递状态

我有一个组件需要从ajax调用中获取参数（唯一的提供者编号）。在响应之后，我使用setState设置新的提供者编号，并使用第一次调用的参数和更多数据进行另一个ajax调用。当我发送第二个ajax时，第一个调用中的provider参数不包括在状态中。为了注册数据，必须将此参数设置为状态，如果第二个请求失败，我不想再次进行第一次调用，因为第二个请求失败，并且没有使用provider参数

const [data, setData] = useState({
  type: 2,
  email: "",
  name: "",
  password: "",
  company: "",
  role: "",
  phone: "",
  provider: "",
});
const registerUser = useCallback(async () => {
  if (data.provider === "") {
    const provider = await getProvider();
    if (!provider) {
      console.log("Get Provider Error");
      return;
    }
  }
  try {
    const res = await api.registerUser(data);
    if (res.data.success) {
      history.push("/");
    }
  } catch (err) {
    console.log(err);
  }
});
const getProvider = useCallback(async () => {
  try {
    const res = await api.createUser({ TYPE: "S", TEXT1: data.name });
    if (res.data.TEXT3) {
      setData({ ...data, provider: res.data.TEXT3 });
      return res.data.TEXT3;
    }
  } catch (err) {
    return null;
  }
});

---

问题是，即使在更新

注册表服务器

中的

数据

时，也无法在

注册表服务器

中获取更新的

数据

，直到下次运行它。这是因为大多数钩子将在其一个周期中创建应用程序状态的一个片段，并且在该片段完成其周期之前不会获得该片段的最新更新。 您可以阅读更多关于它的内容（它写的是

useffect

，但同样适用于

useCallback

）

这是一个很好的例子，说明了代码中发生了什么，简化版

如果您想缓解此问题，我建议使用

useRef

。这将确保挂钩中的数据始终是最新的

const dataRef=useRef({
类型：2，
电邮：“，
姓名：“，
密码：“”，
公司：“，
角色：“，
电话：“，
提供者：“”，
});
常量registerUser=useCallback（异步（）=>{
如果（data.provider==“”）{
const provider=wait getProvider（）；
如果（！提供程序）{
log（“获取提供程序错误”）；
返回；
}
}
试一试{
const res=等待api.registerUser（dataRef.current）；
if（res.data.success）{
历史。推送（“/”）；
}
}捕捉（错误）{
控制台日志（err）；
}
});
const getProvider=useCallback（异步（）=>{
试一试{
const res=await api.createUser（{TYPE:“S”，TEXT1:data.name}）；
如果（res.data.TEXT3）{
dataRef.current={…数据，提供程序：res.data.TEXT3}；
返回res.data.TEXT3；
}
}捕捉（错误）{
返回null；
}
});

问题在于，即使在

注册表服务器

中更新了

数据

，也无法在

注册表服务器

中获取更新的

数据

，直到下次运行它。这是因为大多数钩子将在其一个周期中创建应用程序状态的一个片段，并且在该片段完成其周期之前不会获得该片段的最新更新。 您可以阅读更多关于它的内容（它写的是

useffect

，但同样适用于

useCallback

）

这是一个很好的例子，说明了代码中发生了什么，简化版

如果您想缓解此问题，我建议使用

useRef

。这将确保挂钩中的数据始终是最新的

const dataRef=useRef({
类型：2，
电邮：“，
姓名：“，
密码：“”，
公司：“，
角色：“，
电话：“，
提供者：“”，
});
常量registerUser=useCallback（异步（）=>{
如果（data.provider==“”）{
const provider=wait getProvider（）；
如果（！提供程序）{
log（“获取提供程序错误”）；
返回；
}
}
试一试{
const res=等待api.registerUser（dataRef.current）；
if（res.data.success）{
历史。推送（“/”）；
}
}捕捉（错误）{
控制台日志（err）；
}
});
const getProvider=useCallback（异步（）=>{
试一试{
const res=await api.createUser（{TYPE:“S”，TEXT1:data.name}）；
如果（res.data.TEXT3）{
dataRef.current={…数据，提供程序：res.data.TEXT3}；
返回res.data.TEXT3；
}
}捕捉（错误）{
返回null；
}
});谢谢，你能给我一个在这种情况下如何使用useRef的例子吗谢谢，你能给我一个在这种情况下如何使用useRef的例子吗