从使用中的 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 err

const [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) => {&nbsp; &nbsp;const [poll, setPoll] = useState(null);&nbsp; &nbsp;const [hasError, setHasError] = useState(false);&nbsp; &nbsp;useEffect(() => {&nbsp; &nbsp; &nbsp;axios.get(`api/poll/${props.match.params.id}`)&nbsp; &nbsp; &nbsp; &nbsp; .then(res => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(res.data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setPoll(res.data);&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .catch(err => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(err.message);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setHasError(true)&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; }, [])&nbsp; if(!poll) {&nbsp; &nbsp; console.log('data is still loading')&nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp;<div>Loading....</div>&nbsp; &nbsp; )&nbsp; &nbsp;}&nbsp; if (hasError) {&nbsp; &nbsp;console.log('error when fetching data');&nbsp; &nbsp;return (&nbsp; &nbsp; &nbsp;<Redirect to="/" push />&nbsp; &nbsp;)&nbsp;}&nbsp;return (&nbsp; &nbsp;<div>&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; poll && <div>/* The JSX you want to display for the poll*/</div>&nbsp; &nbsp; }&nbsp; &nbsp;</div>&nbsp;);}export default Poll

Answer 2

在您的 than 中，尝试使用过滤器：setPoll(poll.filter(poll => poll.id !== id));确保用您的识别器替换 id

Answer 3

标准方法是为加载和错误状态设置其他变量，如下所示const Poll = (props) => {&nbsp; &nbsp; const [poll, setPoll] = useState(null);&nbsp; &nbsp; const [loading, setLoading] = useState(false);&nbsp; &nbsp; const [error, setError] = useState(false);&nbsp; &nbsp; useEffect(() => {&nbsp; &nbsp; &nbsp; &nbsp; setLoading(true);&nbsp; &nbsp; &nbsp; &nbsp; axios.get(`api/poll/${props.match.params.id}`)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(res => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(res.data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setPoll(res.data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .catch(err => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(err.message);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setError(true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .finally(()=> {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setLoading(false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }, [])&nbsp; &nbsp; if(error) return <span>error<span/>&nbsp; &nbsp; if(loading) return <span>loading<span/>&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;// your poll data&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}