为什么if语句与RTK查询不像预期的那样工作

Question

我试图建立一个应用程序，从RTK查询后端拉数据，并显示该数据作为帖子。我已经成功地创建了RTKQ端点，该端点使用useEffect从后端获取数据。然而，我想把数据放到另一个数组中这样我就可以通过无限滚动向该数组添加更多数据但我不能这样做。

我的代码如下。所有的帮助将是非常感激的。

import { Box, Stack, Skeleton } from "@mui/material";
import React, { useEffect, useState } from "react";
import Post from "../components/postComponent";
import { useGetSimplesMutation } from '../services/authApi'

const Feed = () => {
const [getSimples, { isLoading, isSuccess, data }] = useGetSimplesMutation()
const [loadNow, setLoadNow] = useState(false)
let simplesData = []
useEffect(() => {
const handleGetSimples = async () => {
try {
await getSimples(0).unwrap()
if (isSuccess & !loadNow) {
console.log("Simples loaded")
simplesData = [...simplesData, ...data]
setLoadNow(true)
console.log(simplesData)
}
} catch (error) {
console.error(error.message)
}
}
handleGetSimples()
}, [])
return (
<Box flex={6} p={{ xs: 0, md: 2 }}>
{isLoading && (
<Box marginLeft={3}>
<Stack spacing={1} >
<Skeleton variant="text" height={100} />
<Skeleton variant="text" height={20} />
<Skeleton variant="text" height={20} />
<Skeleton variant="rectangular" height={300} />
</Stack>
</Box>
)}
{(isSuccess && loadNow) && simplesData.map(simples => {
return (
<div key={simples._id}>
<Post
userName={simples.userName}
dateSubmitted={simples.dateSubmitted}
beforePic={simples.beforePic}
afterPic={simples.afterPic}
tag={simples.tag}
/>
</div>
)
})}
</Box>
);
};
export default Feed;

当我直接映射从RTKQ获得的数据时，此代码有效。然而，当我在If语句中传递数据到另一个数组时，If语句内的代码在isSuccess与loadNow一起获得true时不会触发，loadNow的默认状态为false。我想添加数据到simplesData数组当这个条件为真，然后setLoadNow为真，这样我就可以渲染我的帖子。

Answer 1

let simplesData = []将在每次组件重新渲染时重新执行，这将清除您存储的任何内容。

如果你想在多个渲染中保持数据，那么你需要将其存储在useState钩子中。

const [simplesData, setSimplesData] = useState([])

在你的useEffect中，你可以调用setSimplesData，使用一个功能更新来最小化你的效果的依赖性。

setSimplesData(prevData => [...prevData, ...data])

---

这里还有一些其他问题，主要是缺乏useEffect依赖性。我觉得你想要这样的东西?

const Feed = () => {
const [getSimples, { isLoading, isSuccess }] = useGetSimplesMutation()
const [loadPage, setLoadPage] = useState(0)
const [simplesData, setSimplesData] = useState([])
const handleEndReached = () => {
setLoadPage(prevPage => prevPage + 1);
}
const handleReset = () => {
setSimplesData([]);
setLoadPage(0);
}
useEffect(() => {
const handleGetSimples = async () => {
try {
const pageData = await getSimples(loadPage).unwrap()
console.log(`Simples page ${loadPage} loaded`)
setSimplesData(prevData => [...prevData, ...pageData])
} catch (error) {
console.error(error.message)
}
}
handleGetSimples()
}, [loadPage]);