Question

如何显示通过fetch调用获取的数据，然后将其设置为数组，并在满足条件的情况下显示在Dom中。目前，我渲染页面的速度比获取数据并对其进行处理的速度快。

预先感谢

function Profile() {
  let myReceipe = [];
  const [isPopUp, setPopUp] = useState(false);

  ReceipeService.getReceipes().then(data => {
    myReceipe = data;
  })

  const popUpHandler = () => {
    setPopUp(!isPopUp);
  }
  return (
    <>
      <div className='profile'>
        <ProfileHeader/>
        <div className='createdposts'>
        {myReceipe.length !== 0 ? 
          <Post popUpHandler={popUpHandler} myReceipe={myReceipe}/>
          :
          null
        }
        </div> 
      </div>
      {isPopUp === true ? 
      <Magnify popUpHandler={popUpHandler}/>
      : 
      null
      }
  </>
  )
}

Answer 1

代码中的问题对

您没有使用useEffect钩子发出HTTP请求
myReceipe应该处于组件状态

数据将始终在组件渲染后加载。

您获取数据的方式不是正确的方式。 React具有useEffect挂钩，该挂钩正是为此目的而构建的。从服务器获取数据是一个副作用，所有副作用都属于useEffect挂钩内。因此，将发出HTTP请求的代码移到useEffect挂钩中。

还要确保myReceipe是组件的本地状态

const [myReceipe, setMyReceipe] = useState([]);

并且当服务器中的数据可用时，请更新状态以触发重新渲染，以便可以向用户显示数据。

useEffect(() => {
  ReceipeService.getReceipes()
    .then(data => {
       setMyReceipe(data);
    });
}, []);

当数据不可用时，向用户显示某种加载微调器，以向用户指示数据正在加载。

Answer 2

仅使用状态变量myReceipe，然后在设置myReceipe时，组件将在useEffect中调用ReceipeService.getReceipes（）时重新渲染：

  let myReceipe = [];
  const [isPopUp, setPopUp] = useState(false);
  const [myReceipe , setmyReceipe ] = useState([]);
  useEffect(
  ()=>{
     let isMounted=true;
      ReceipeService.getReceipes().then(data => {
        // isMounted && insures the component is still mounted
        // or else this might through an error if the component has unmounted but the api call responded  because you cant just update staet of un unmounted Component 
        isMounted && setmyReceipe(data);
      })
        return ()=>{isMounted  = false }
  },[])
  

  const popUpHandler = () => {
    setPopUp(!isPopUp);
  }
  return (
    <>
      <div className='profile'>
        <ProfileHeader/>
        <div className='createdposts'>
        {myReceipe.length !== 0 ? 
          <Post popUpHandler={popUpHandler} myReceipe={myReceipe}/>
          :
          null
        }
        </div> 
      </div>
      {isPopUp === true ? 
      <Magnify popUpHandler={popUpHandler}/>
      : 
      null
      }
  </>
  )
}

页面呈现比获取数据并显示它更快

2 个答案: