Question

我正在使用deckofcardsapi.com，并且无法在道具中传递我的deck_id来获取网址。

道具通过正常，因为当我在第40行中使用它们时，它们显示为普通字符串。然后，当我将此字符串粘贴到第23行的变量deckId时，它就为我提供了卡片列表。

但是当我不是使用props.deckId将字符串复制到deckId时，会出现错误“ TypeError：cards.cards未定义”

另一方面，道具很好。

这是我的代码

import React, { useState, useEffect } from 'react';

function NewDeck(props) {
  const [deck, setDeck] = useState({ deck_id: [] });

  async function draw() {
    const result = await fetch(`https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1`);
    const json = await result.json();
    setDeck(json);
  };

    useEffect(() => {
    draw();
  }, []);

  return(
    <Draw deckId={deck.deck_id} quantity={props.quantity} />
  );
}

function Draw(props) {
  const [cards, setCards] = useState({ cards: [] });
  var deckId = props.deckId;  //when i put here for egzample "l31hmefvilqe" it is working

  async function draw() {
    const result = await fetch(`https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=${props.quantity}`);
    const json = await result.json();
    setCards(json);
  };

    useEffect(() => {
    draw();
  }, []);

  return(
    <ul>
      {cards.cards.map(item => (
        <li>{item.code}</li>
      ))}
      <li>deckId: {props.deckId}</li>
      <li>quantity: {props.quantity}</li>
    </ul>
  );
}

export default NewDeck;

如何将props.deckId传递到获取的网址中

我正在寻找答案，但没有结果。这可能是我的愚蠢错误，但我找不到。

谢谢您

Answer 1

问题在于，在NewDeck的第一个渲染中，未设置deck_id的值，并且它传递了一个空数组。您可以对其进行修复，以使其有条件地将Draw组件渲染为具有value的deck_id。 https://codesandbox.io/s/brave-margulis-olgxt在我的示例中，我将deck_id设置为null，并且仅在deck_id存在时才渲染绘制。

PD：props.quantity未定义，也许您是说deck.remaining？还要检查组件中useEffect的draw（）依赖项，也许您需要useCallback（）（I0m不太确定，因为我还在学习钩子）

将道具传递到URL

1 个答案: