为什么我不能在 React State 上使用点符号？

如何解决为什么我不能在 React State 上使用点符号？

我正在创建一个抽认卡应用程序，我目前正在尝试将抽认卡的正面设置为来自 API 的一些文本。

我的状态：

const [deckWithCards,setDeckWithCards] = useState([]);

deckWithCards 是一副抽认卡，它看起来像：

{name: 'Test Name',description: 'Test Description',id: 3,cards: Array(4)};

当我执行 deckWithCards.cards 时，我得到：

[{id: 1,front: 'Front of card',back: 'Back of Card',deckId: 1}]

如果一副牌中有 4 张牌，我会得到一个数组，其中包含 4 个这些对象和相应的数据。

我需要访问所有这些信息，但是，当我尝试执行 deckWithCards.cards.front 时，我得到“无法读取未定义的属性 'front'。”

我也尝试循环遍历卡片数组，例如：

let arr = [];
let allCards = deckWithCards.cards;
for (let i = 0; i < allCards.length; i++) {
   arr.push(allCards.front);
}

这给了我：“无法读取未定义的属性‘长度’。”

如何访问此卡片数组中的项目？

辅助函数：

export async function readDeck(deckId,signal) {
  const url = `${API_BASE_URL}/decks/${deckId}?_embed=cards`;
  return await fetchJson(url,{ signal });
}

export async function listCards(deckId,signal) {
  const url = `${API_BASE_URL}/cards?deckId=${deckId}`;
  return await fetchJson(url,{ signal });
}

我如何设置我的状态：

useEffect(() => {
    const abortController = new AbortController();

      readDeck(deckId,abortController.signal)
      .then(setDeckWithCards)
      .catch(setError)

      listCards(deckId,abortController.signal)
        .then(setCards)
        .catch(error)

      return () => abortController.abort();
  },[]);

解决方法

首先，第一个状态是[]

const [deckWithCards,setDeckWithCards] = useState([]);

所以在第一次运行时，除了 deckWithCards 是一个没有属性 cards 的数组。这可能会触发您遇到的错误。

否则，如果 deckWithCards 是一个对象数组，那么要访问卡片，比方说，第一个对象，您需要输入 deckWithCards[0].cards

如果您使用上述对象正确设置 deckWithCards 的值，deckWithCards.cards 应该正确返回卡片的例外列表。

,

在您设置卡片之前，您的 useEffect 和 fetch 仍在运行中。在此期间，deckWithCards 的值将是您在 useState 中提供的初始值。您的组件必须以一种可以正常运行并使用该初始值正确呈现的方式构建。如果已解决的牌组的最终值是 object，那么您的初始值是一个空数组是没有意义的。

const [deckWithCards,setDeckWithCards] = useState([]);

我建议您将初始状态设置为 null 或 undefined。在访问 deckWithCards 上的任何属性之前，您必须检查它是否已设置为实际值。

const [deckWithCards,setDeckWithCards] = useState(null);
const allCards = deckWithCards ? deckWithCards.cards : [];

这里我们检查 deckWithCards 是否为 truthy（不是 null）。如果我们有一副牌，那么我们就可以从牌组中访问这些牌。如果它仍然是 null，我们使用一个空数组。无论哪种方式，allCards 都将始终是一个 array，您可以map、循环通过等。

const fronts = allCards.map( card => card.front );

return (
  <ul>
    {allCards.map( (card) => (
       <div className="card" key={card.id}>
          {card.front}
       </div>
    ))}
  </ul>
)