将 setTimeout 添加到加载中

Question

我正在使用 React 来获取数据并将其显示在我的应用程序中。如果我正在加载，我会显示消息：“正在加载...”。

我想要的是使用 setTimeout() 将加载消息显示的时间比应有的多几秒钟。但是我不知道如何在反应中写这个。

我的代码：

export default function JobList() {
  
  const {loading ,error , jobs} = useFetch();
  

  return (
    <div>
      {loading && <p> Loading  </p>} //HOW DO I USE SETTIMEOUT ON THIS <P> ELEMENT ? 
      {jobs && jobs.map(j=>return <p> {j.title} </p>)}
    </div>  
  );
  
}

Answer 1

export default function JobList() {
  const [isLoading, setIsLoading] = useState(false)
  const {loading ,error , jobs} = useFetch();

  useEffect(() => {
    if (loading) {
      setIsLoading(true)
    }

    if (!loading) {
      setTimeout(() => {
        setIsLoading(false)
      }, 2000)
    }
  }, [loading])

  return (
    <div>
      {isLoading && <p> Loading  </p>}
      {!isLoading && jobs?.map(j=>return <p> {j.title} </p>)}
    </div>  
  );
}

使用 useState 挂钩创建一个名为 isLoading 的状态。使用它有条件地渲染 Loading component/spinner.

setIsLoading 每次 loading 更改时都会在 useEffect 中调用。因此，如果您在 useEffect 中添加 setTimeout，它将在 2000 毫秒后从 true 变为 false。

这假设从 useFetch 加载是一个布尔值。

此外，如果您使用的是 ES2020，则可以在 jobs.map 渲染中使用可选链接。您可以避免编写额外的支票。

Answer 2

这是一个解决方案，您应该尝试类似的方法。

export default function JobList() {
  
  const [loading, setLoading] = useState(true);
  const request = useFetch('https://example.com')

  request.post('/todos', {
    any: 'data'
  }).then(response => {
      settimeout(() => {
          setLoading(false)
      }, 1000 ) // here you can set delay
  }).catch(error => {
      // error handing here...
  })

  return (
    <div>
      {loading && <p> Loading  </p>} //HOW DO I USE SETTIMEOUT ON THIS <P> ELEMENT ? 
      {jobs && jobs.map(j=>return <p> {j.title} </p>)}
    </div>  
  );
  
}

将 setTimeout 添加到加载中

react add setTimeout to loading

javascript

settimeout

reactjs