使用 fetch 更新状态，然后在 useEffect 中使用状态不起作用

Question

我在 React 中有一个组件，在 useEffect 中我进行了两次 API 调用并设置了两种状态。仍然在useEffect 之后，我试图设置另一个状态，其中一个状态由 API 更新。如果我通过保持useEffect 的方括号参数为空来执行此操作，则不会设置状态。如果我传递括号中的状态常量，它会进入无限循环。

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])

我如何做到这一点，以便我可以设置该状态以及我需要在 useEffect 中进行设置。

Answer 1

useEffect(() => {
  const doAsyncStuff = async () => {
     await fetchData(); // wait for this data to load
     const { data } = props.location;
     let pge = data !== undefined ? data.page : 1;
     setUser(props.match.params.user);
     setPage(pge);
     
     let lowerB = (0 +((pge - 1) * 10));
     let upperB = 10 + ((pge - 1) * 10);
     
     setQueues(state => state.slice(lowerB, upperB)); // change here
  }
  doAsyncStuff();
}, [queues])

首先我认为你需要等待数据加载，所以你必须等待await fetchData();

然后在设置setQueues 时，您必须执行setQueues(state => state.slice(lowerB, upperB));

Answer 2

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

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])

... 但您可能不需要大部分内容

• queues 是派生数据；
• 可以在页面属性更改后的每次渲染上“计算”该子集；
• 获取页面参数后可能超出范围 - 重定向？

Answer 3

我已尝试修复代码，并在 cmets 中详细解释了如何正确使用 useEffect 挂钩。我强烈建议您阅读 Dan Abramov 的 this blog post，它将消除您对使用 useEffect 钩子的大部分误解

//since you data fetching code does not depend on anything inside your component you can hoist it outside the component.

async function getAgentData(){
  try{
     const response = await fetch('http://localhost:3004/agentsdata');
     return await response.json();
  } catch(error){
    console.log(error)
  }
}

async function getQueueData{
  try{
     const response = await fetch('http://localhost:3004/queuedata');
     return await response.json();
  } catch(error){
    console.log(error)
  }
}


function YourComponent(props){

   // destructure your props
   const { location: { data }, match } = props;
   const { params: { user } } = props.match;

   // Split your hooks by concern keep the related code together
   useEffect(() => {

      setUser(user);

   // add ALL you dependencies for this effect
   }, [user])

   // Second Effect
   useEffect(() => {

     const pge = (data == undefined)? 1 : data.page;
     const lowerB = (0 +((pge - 1) * 10));
     const upperB = 10 + ((pge - 1) * 10);

     setPage(pge);

     async function fetchData(){
       const agentRes = await getAgentData();
       setAgents(agentRes);

       const queueRes = await getQueueData();

       // Note: There need to first save it to state; then retrieve then slice then update again. When all you need is this
       setBaseQueues(queueRes.slice(lowerB, upperB));
     }

     //call the function here
     fetchData();

     //Add the ALL the dependencies of this effect i.e all props, functions, state variables inside 
     //YourComponent that you have used in this effect
     //In this case this effect is only run when this.props.location.data is changes, which is the desired behaviour
   }, [ data ])

   return <>Whatever</>
}