从 useEffect 中的 api 获取并相应地渲染组件

Question

我在 React 中基于 api 调用渲染组件时遇到问题。我在 useEffect 钩子中获取我的数据，用数据更新状态。在 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

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

例如if (!poll) { return <div>Loading...</div>}这将呈现一个带有"加载..."的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>
)
}