Javascript 使用fetch更新状态，然后使用useffect中的状态不会'；行不通

我在React中有一个组件，在

useffect

中我进行了两次API调用并设置了两种状态。在仍然处于

useffect

状态后，我试图用API更新的状态之一设置另一个状态。如果将

useffect

的方括号参数保持为空，则不会设置状态。如果我传递括号中的状态常数，它将进入一个无限循环

async function fetchData() {
    const agentRes = await fetch("http://localhost:3004/agentsdata");
        agentRes
            .json()
            .then(res => setAgents(res))
            .catch(err => console.log(err));

    const queueRes = await fetch("http://localhost:3004/queuedata");
        queueRes
            .json()
            .then(res => setBaseQueues(res))
            .catch(err => console.log(err));
    }

useEffect(() => {

    fetchData();

    let pge;

    if (props.location.data !== undefined) {
        pge = props.location.data.page;
    }
    else {pge = 1;}

    setUser(props.match.params.user);
    setPage(pge);


    let lowerB = (0 +((pge - 1) * 10));
    let upperB = 10 + ((pge - 1) * 10);

    setQueues(baseQueues.slice(lowerB, upperB)); // here the state is not getting set.
}, [queues])

如何设置该状态，以便在

useffect

中设置该状态以及所需的状态

useffect（（）=>{
const doAsyncStuff=async（）=>{
wait fetchData（）；//等待加载此数据
const{data}=props.location；
设pge=数据！==未定义？数据。第页：1；
setUser（props.match.params.user）；
setPage（pge）；
设lowerB=（0+（（pge-1）*10））；
设upperB=10+（（pge-1）*10）；
setQueues（state=>state.slice（lowerB，upperB））；//在此处更改
}
doAsyncStuff（）；
}，[queues]）

useffect（（）=>{
const doAsyncStuff=async（）=>{
wait fetchData（）；//等待加载此数据
const{data}=props.location；
设pge=数据！==未定义？数据。第页：1；
setUser（props.match.params.user）；
setPage（pge）；
设lowerB=（0+（（pge-1）*10））；
设upperB=10+（（pge-1）*10）；
setQueues（state=>state.slice（lowerB，upperB））；//在此处更改
}
doAsyncStuff（）；
}，[queues]）

您可以使用更简单的模式：

useEffect(() => {
  fetchData();
}, [queues])

useEffect(() => {
  let pge;

  if (props.location.data !== undefined) {
      pge = props.location.data.page;
  }
  else {pge = 1;}

  setUser(props.match.params.user);
  setPage(pge);

  let lowerB = (0 +((pge - 1) * 10));
  let upperB = 10 + ((pge - 1) * 10);

  setQueues(baseQueues.slice(lowerB, upperB)); // here baseQueues is updated.
}, [baseQueues])

但您可能不需要这其中的大部分

• 队列

  是派生数据
• 页面属性更改后，可以在每次渲染时“计算”此子集
• 发送后，页面参数可能超出范围-重定向

  ---

您可以使用更简单的化学：

useEffect(() => {
  fetchData();
}, [queues])

useEffect(() => {
  let pge;

  if (props.location.data !== undefined) {
      pge = props.location.data.page;
  }
  else {pge = 1;}

  setUser(props.match.params.user);
  setPage(pge);

  let lowerB = (0 +((pge - 1) * 10));
  let upperB = 10 + ((pge - 1) * 10);

  setQueues(baseQueues.slice(lowerB, upperB)); // here baseQueues is updated.
}, [baseQueues])

但您可能不需要这其中的大部分

• 队列

  是派生数据
• 页面属性更改后，可以在每次渲染时“计算”此子集
• 发送后，页面参数可能超出范围-重定向

  ---

我已尝试修复代码，并在注释中详细解释了如何正确使用useEffect挂钩。我强烈建议您阅读丹·阿布拉莫夫的著作，它将消除您对

useffect

hook使用的大部分误解

//由于数据获取代码不依赖于组件内部的任何东西，因此可以将其提升到组件外部。
异步函数getAgentData（）{
试一试{
const response=等待获取（'http://localhost:3004/agentsdata');
return wait response.json（）；
}捕获（错误）{
console.log（错误）
}
}
异步函数getQueueData{
试一试{
const response=等待获取（'http://localhost:3004/queuedata');
return wait response.json（）；
}捕获（错误）{
console.log（错误）
}
}
功能组件（道具）{
//破坏你的道具
const{location:{data}，match}=props；
const{params:{user}}=props.match；
//按关注点划分钩子，将相关代码放在一起
useffect（（）=>{
setUser（用户）；
//添加此效果的所有依赖项
}，[用户]）
//第二效应
useffect（（）=>{
常量pge=（数据==未定义）？1:data.page；
常数lowerB=（0+（（pge-1）*10））；
常数b=10+（（pge-1）*10）；
setPage（pge）；
异步函数fetchData（）{
const agentRes=等待getAgentData（）；
设置代理（代理）；
const queueRes=等待getQueueData（）；
//注意：首先需要将其保存到状态，然后检索，然后切片，然后再次更新
setBaseQueues（queueRes.slice（lowerB，upperB））；
}
//在这里调用函数
fetchData（）；
//添加此效果的所有依赖项，即内部的所有道具、函数、状态变量
//您在此效果中使用的组件
//在这种情况下，此效果仅在this.props.location.data更改时运行，这是所需的行为
}，[数据]）
还什么
}

我试图修复代码，并在注释中详细解释了如何正确使用useEffect挂钩。我强烈建议您阅读丹·阿布拉莫夫的著作，它将消除您对

useffect

hook使用的大部分误解

//由于数据获取代码不依赖于组件内部的任何东西，因此可以将其提升到组件外部。
异步函数getAgentData（）{
试一试{
const response=等待获取（'http://localhost:3004/agentsdata');
return wait response.json（）；
}捕获（错误）{
console.log（错误）
}
}
异步函数getQueueData{
试一试{
const response=等待获取（'http://localhost:3004/queuedata');
return wait response.json（）；
}捕获（错误）{
console.log（错误）
}
}
功能组件（道具）{
//破坏你的道具
const{location:{data}，match}=props；
const{params:{user}}=props.match；
//按关注点划分钩子，将相关代码放在一起
useffect（（）=>{
setUser（用户）；
//添加此效果的所有依赖项
}，[用户]）
//第二效应
useffect（（）=>{
常量pge=（数据==未定义）？1:data.page；
常数lowerB=（0+（（pge-1）*10））；
常数b=10+（（pge-1）*10）；
setPage（pge）；
异步函数fetchData（）{
const agentRes=等待getAgentData（）；
设置代理（代理）；
const queueRes=等待getQueueData（）；
//注意：首先需要将其保存到状态，然后检索，然后切片，然后再次更新
setBaseQueues（queueRes.slice（lowerB，upperB））；
}
//在这里调用函数
fetchData（）；
//添加此效果的所有依赖项，即内部的所有道具、函数、状态变量
//您在此效果中使用的组件
//