my data呈现两次，第一次返回空

Question

对于一个项目，我得到的多个对象都包含特定的足球比赛细节，所以我通过比赛日过滤比赛，但我一直得到一个空数组在我的第一次渲染，然后当我离开选项卡并回来，然后渲染我需要的对象，我如何让它渲染一次我的数据

下面是我的代码:

//my states
const [selectedLeague,setSelectedLeague]=useState({})
const [loading,setLoading]= useState(false)
const [competitions,setCompetitions]= useState([])
const [matchday,setMatchDay]=useState([])
const [matches,setMatches]=useState([])
const [LeagueName,setSelectedLeagueName]=useState([])
const area_ids= [2072,2114,2163,2077,2081,2088,2187,2224]

然后我尝试获取比赛并按比赛日进行筛选

const getMatches= async()=>{
const response = await axios.get(`${FOOTBALL_API_URL}/${selectedLeague}/matches`,{
method: 'get', 
headers: { 'X-Auth-Token': `${FOOTBALL_API_TOKEN}`}
} );
console.log('checking getmatch response',response)
const data = await response.data
console.log('checking response.data',data)
setLoading(true)
// set matchday
setMatchDay(data.matches[0].season.currentMatchday)
// filter matches by matchday
const filter = data.matches.filter((match)=>{
return matchday === match.matchday
})
// log the filtered array
console.log('filtered array',filter)


setMatches(filter)

}

但是我只得到比赛日，当过滤列表第一次呈现时，它总是一个空列表

filtered array []length: 0[[Prototype]]: Array(0)

控制台日志在第一次渲染时显示空数组

我试过调整使用效果，但它只能无限循环

React.useEffect(() => {
getMatches()
}, [matches])

但是当我离开页面并返回时它会获得我需要的数据

filtered array 
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {area: {…}, competition: {…}, season: {…}, id: 416384, utcDate: '2022-08-05T19:00:00Z', …}
1: {area: {…}, competition: {…}, season: {…}, id: 416383, utcDate: '2022-08-06T11:30:00Z', …}
2: {area: {…}, competition: {…}, season: {…}, id: 416378, utcDate: '2022-08-06T14:00:00Z', …}
3: {area: {…}, competition: {…}, season: {…}, id: 416379, utcDate: '2022-08-06T14:00:00Z', …}
4: {area: {…}, competition: {…}, season: {…}, id: 416381, utcDate: '2022-08-06T14:00:00Z', …}
5: {area: {…}, competition: {…}, season: {…}, id: 416382, utcDate: '2022-08-06T14:00:00Z', …}
6: {area: {…}, competition: {…}, season: {…}, id: 416377, utcDate: '2022-08-06T16:30:00Z', …}
7: {area: {…}, competition: {…}, season: {…}, id: 416376, utcDate: '2022-08-07T13:00:00Z', …}
8: {area: {…}, competition: {…}, season: {…}, id: 416380, utcDate: '2022-08-07T13:00:00Z', …}
9: {area: {…}, competition: {…}, season: {…}, id: 416375, utcDate: '2022-08-07T15:30:00Z', …}
length: 10
[[Prototype]]: Array(0)

控制台日志显示包含请求数据的筛选数组

我需要在第一次渲染上得到我的数据，我是新的钩子，所以我希望我错过了一些简单的东西。谢谢。如果你有任何问题，请回复这个趋势。

Answer 1

来自react官方文档

如果你想运行一个效果并且只清理一次(在挂载和卸载时)，你可以传递一个空数组([])作为第二个参数。这告诉React你的效果不依赖于props或state的任何值，所以它永远不需要重新运行。

因此，请将useEffect更改为next

useEffect(() => {
getMatches();
}, []);

这应该能解决你的问题。

希望对你有帮助。

Answer 2

//state
const [loading, setLoading] = useState(true); 
....
///
useEffect(()=>{
if(matches.length > 0){
setLoading(false)
return; // shortcircut in case the data is here first(optional)
}
let results = getMatches();
let filteredMatches = results.filter(()=>{/*filter function*/});
setMatches(filteredMatches); //seting the state will cause a re-render
setLoading(false); // this second state change wont cause another re-render cause there is one pending
}, []); // pass in an empty array to say there are no dependencies that effect should watch

return( loading ? {"Fetching the matches"}: <Component/> ); //on the first render, matches will be empty,

第二个参数在useEffect决定和影响运行多长时间,它运行时数据发生变化,通常你想让你的应用程序获取数据一旦呈现,那么您应该传递一个空数组。此外，你的组件可能会在请求完成之前挂载，所以你需要处理它在等待时应该呈现的内容。React在这种情况下有一个叫做悬念的概念，或者你可以使用loading状态，比如return ( loading ? <p>"..loading"</p> : <component/>)