React - map函数？

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

我会尝试使用Set来跟踪保存的卡I，因为它提供了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)}
  />
))}

Answer 2

只需声明以下状态：

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>