React - map function?

Question

这个想法是提取用户在数据库中使用的卡，并和屏幕上正在侦听的所有卡进行比较。基本上，用户不应该看到他已经使用过的卡片。

const loadSaveInvestments = async (
_req: express.Request,
res: express.Response
) => {
const findSaveInvestments = await prisma.investmentSave.findMany({
select: {
investment_id: true,
},
});
if (!findSaveInvestments) throw new HttpException(400, SAVE_INVEST_MISSING);
res.send(findSaveInvestments);
};

所以，我把所有保存下来的投资卡都寄出去了。现在，在React中，我从服务中获取发送的数据(所有卡和保存的卡(

const fetchUserSaveInvestments = async () => {
const res = await axios.get(`${baseURL}/investments-save`);
return res;
};

const [cards, setCards] = useState([]);
const [saveCards, setSaveCards] = useState([]);
useEffect(() => {
setLoading(true);
investService.fetchUserSaveInvestments().then((res) => {
setSaveCards(res.data);
});
investService.fetchCards().then((res) => {
setCards(res.data.investments);
setLoading(false);
});

现在是主要部分。我只想在id不处于保存卡状态的情况下映射卡，所以我尝试过这样的方法。。我已经标记了我有点卡住的地方，我的意思是，我应该创建像双地图之类的东西吗？我想知道我的方向是否正确。

<div className={classes.CardsContainer}>
<div className={classes.CardsSelector}>
{loading && <p> its loading </p>}
{!loading && (
<>
{cards
.filter(
(card) => card.id !== saveCards.?????.investments_id
)
.map((card) => (
<Card
{...card}
handleClick={() => handleChooseCard(card)}
/>
))}
</>
)}
</div>

提前谢谢。

Answer 1

只需声明以下状态：

const [investmentsIds, setInvestmentIds] = useState([]);

在这里再添加几行代码：

investService.fetchUserSaveInvestments().then((res) => {
setSaveCards(res.data);
let savedCardIds = [];
/* push investment_id in an array */
res.data.forEach((value)=>{
savedCardIds.push(value.investments_id);
})
setInvestmentIds(savedCardIds);
});

您的JSX:

<div className={classes.CardsContainer}>
<div className={classes.CardsSelector}>
{loading && <p> its loading </p>}
{!loading && (
{cards.map((card) => (
{investmentsIds.includes(card.id) && 
<Card {...card}
handleClick={() => handleChooseCard(card)}/>
}
))}
)}
</div>
</div>

Answer 2

我会尝试使用Set来跟踪保存的卡ID，因为它提供了O(1(时间复杂性查找(快速，比为每个候选过滤器搜索另一个数组更好(。

const [loading, setLoading] = useState(false)
const [cards, setCards] = useState([])
const [saveCards, setSaveCards] = useState(new Set())
useEffect(async () => {
setLoading(true);
const { data: savedCards } = await investService.fetchUserSaveInvestments()
const savedCardIds = savedCards.map(({ investments_id }) => investments_id)
setSaveCards(new Set(savedCardIds))
const { data: { investments: cards } } = await investService.fetchCards()
setCards(cards)
setLoading(false)
}, [])

然后，您可以使用备忘录进行过滤

const myCards = useMemo(() => cards.filter(({ id }) => !saveCards.has(id)), [cards, saveCards])

{myCards.map(card => (
<Card
{...card}
handleClick={() => handleChooseCard(card)}
/>
))}