从使用中的 API 获取相应的效果和呈现组件

Question

我在 React 中渲染基于 API 调用的组件时遇到问题。我在使用中获取数据效果挂钩使用数据更新状态。在 api 获取所有数据之前，状态为 null 一段时间，但到那时，组件将使用 null 值进行呈现。这就是我所拥有的：import React, { useEffect, useState } from 'react'import axios from 'axios';import { Redirect } from 'react-router-dom';const Poll = (props) => {const [poll, setPoll] = useState(null);//if found is 0 not loaded, 1 is found, 2 is not found errconst [found, setFound] = useState(0);useEffect(() => {    axios.get(`api/poll/${props.match.params.id}`)        .then(res => {            console.log(res.data);            setPoll(res.data);            setFound(1);        })        .catch(err => {            console.log(err.message);            setFound(2);        });}, [])if(found===2) {    return(        <Redirect to="/" push />    )}else{    console.log(poll)    return (        <div>        </div>    )}}export default Poll这是我的解决方法，但感觉不是应该这样做的方式。如何设置它，以便等待我的 api 数据返回，然后相应地呈现组件？

Answer 1

您不需要像 那样跟踪 API 调用的状态。只需检查轮询是否存在，也可以创建一个新的状态变量来跟踪错误。const [found, setFound] = useState(1)

例如，这将呈现一个带有“加载...”的 div当没有数据时。请参阅下面的代码，了解完整的解决方案，if (!poll) { return <div>Loading...</div>}

import React, { useEffect, useState } from 'react'

import axios from 'axios';

import { Redirect } from 'react-router-dom';

const Poll = (props) => {

   const [poll, setPoll] = useState(null);

   const [hasError, setHasError] = useState(false);

   useEffect(() => {

     axios.get(`api/poll/${props.match.params.id}`)

        .then(res => {

            console.log(res.data);

            setPoll(res.data);

        })

        .catch(err => {

            console.log(err.message);

            setHasError(true)

        });

  }, [])

  if(!poll) {

    console.log('data is still loading')

    return(

       <div>Loading....</div>

    )

   }

  if (hasError) {

   console.log('error when fetching data');

   return (

     <Redirect to="/" push />

   )

 }

 return (

   <div>

    {

      poll && <div>/* The JSX you want to display for the poll*/</div>

    }

   </div>

 );

}

export default Poll

Answer 2

在您的 than 中，尝试使用过滤器：

setPoll(poll.filter(poll => poll.id !== id));

确保用您的识别器替换 id

Answer 3

标准方法是为加载和错误状态设置其他变量，如下所示

const Poll = (props) => {

    const [poll, setPoll] = useState(null);

    const [loading, setLoading] = useState(false);

    const [error, setError] = useState(false);

    useEffect(() => {

        setLoading(true);

        axios.get(`api/poll/${props.match.params.id}`)

            .then(res => {

                console.log(res.data);

                setPoll(res.data);

            })

            .catch(err => {

                console.log(err.message);

                setError(true);

            })

            .finally(()=> {

                setLoading(false);

            };

    }, [])

    if(error) return <span>error<span/>

    if(loading) return <span>loading<span/>

    return (

        <div>

           // your poll data

        </div>

    )

}