当我需要的数据在全局范围内时，如何在另一个函数中调用一个函数？答案

【问题标题】：How do I call a function within another function when the data I need is in the global scope?当我需要的数据在全局范围内时，如何在另一个函数中调用一个函数？
【发布时间】：2020-12-21 17:25:38
【问题描述】：

我有一组要映射的卡片对象。当我点击一张卡片时，它会添加 selected 类，这反过来给它一个边框以显示它被选中的用户，它还将卡片的 id 添加到 selectedCards useState 数组中。

我想发生什么：

每个卡片对象都有一个creditAvailable 键状态，它等于一个数字。在选择（单击）卡片时，除了选择卡片之外，我还想添加creditAvailable 并将其显示在屏幕上。当我取消选择卡片时，我希望数字下降。

我已经尝试过：

我认为这就像调用函数来在选择卡的第一个函数中添加信用一样简单，但是当控制台登录第一个函数时，我看到状态尚未更新。（范围）。

然后我尝试在第一个函数之外调用该函数，但它给了我一个无限循环。这是我的代码。有任何想法吗？谢谢

  const [cards, setCards] = useState([]);
  const [selectedCards, setSelectedCards] = useState([]);
  const [total, setTotal] = useState();

const handleSelectCard = (id) => {
   if (selectedCards.includes(id)) {
     const filteredIds = selectedCards.filter((c) => c !== id);
     setSelectedCards([...filteredIds]);
   } else {
     setSelectedCards([...selectedCards, id]);
   }
   // addUpCreditAvailable(); // nothing happens
   console.log(selectedCards); // []
 };

console.log(selectedCards) // [1] for example. This is in the global scope

  const addUpCreditAvailable = () => {
    console.log("inside add up credit");
    const chosenCards = selectedCards.map((id) => {
      const foundCard = allCards.find((card) => {
        return card.id === id;
      });
      return foundCard; 
    });
    const result = chosenCards.reduce((acc, card) => {
      return acc + card.creditAvailable;
    }, 0);
     setTotal(result);

    return result;
  };

 return (
    <div className="Container">
      <UserInputForm submitData={handleSubmitData} />
      <h1> Cards available to you displayed are below!</h1>
      {cards.map(
        ({
          id,
          name,
          number,
          apr,
          balanceTransfer,
          purchaseDuration,
          creditAvailable,
          expiry,
        }) => (
          <CreditCard
            key={id}
            name={name}
            number={number}
            apr={apr}
            balanceTransferDuration={balanceTransfer}
            purchaseOfferDuration={purchaseDuration}
            creditAvailable={creditAvailable}
            expiry={expiry}
            onClickCard={() => handleSelectCard(id)}
            selected={selectedCards.includes(id)}
          />
        )
      )}
   <span> £{total}</span>
)}

【问题讨论】：

total 不应该是一个状态。只需根据selectedCards 计算即可。
@JonasWilms 但这不是我在 addUpCreditAvailable 函数中所做的吗？我正在计算数字并返回结果......你的意思是我应该摆脱 setTotal(result); 和 useState 吗？
是的，完全正确。 setSelectedCards([...filteredIds]); 也不应该直接在组件中。

标签： javascript reactjs function scope

【解决方案1】：

我在上面的帮助下想通了。正如 Wilms 所说，我必须返回 handleSelectCard 函数的结果并返回 addUpCredit 函数的结果。然后我用selectedCards 状态调用addUpCreditAvailable 并将结果存储在一个变量中，然后我将其显示在我的render 方法中。

 const [cards, setCards] = useState([]);
  const [selectedCards, setSelectedCards] = useState([]);

  const handleSelectCard = (id) => {
    if (selectedCards.includes(id)) {
      const filteredIds = selectedCards.filter((c) => c !== id);
      setSelectedCards([...filteredIds]);
    } else {
      setSelectedCards([...selectedCards, id]);
    }
    return selectedCards;
  };

  const addUpCreditAvailable = (selectedCards) => {
    const chosenCards = selectedCards.map((id) => {
      const foundCard = allCards.find((card) => {
        return card.id === id;
      });
      return foundCard;
    });

    const result = chosenCards.reduce((acc, card) => {
      return acc + card.creditAvailable;
    }, 0);
    return result;
  };

  const totalCredit = addUpCreditAvailable(selectedCards);

渲染方法：

render (
[...]
 {selectedCards.length && (
        <div className={bem(baseClass, "total-credit")}>
          Total Credit available: £{totalCredit}
        </div>
      )}

[...]
)

【讨论】：