时间戳

首页 > 解决方案 > 从 API 获取的数据未呈现 (React)

javascript - 从 API 获取的数据未呈现 (React)

问题描述

我正在尝试使用反应挂钩（useEffect）进行 api 调用并将数据存储在变量中。数据存储在一个数组中，但是当我想渲染它时，什么都没有渲染。

    const [cards, setCards] = useState<ICard[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    (async () => {
      try {
        const response = await fetch(apiUrl);
        if (!response.ok) throw new Error('Couldnt find the url');
        setCards(initCards(await response.json()));
        console.log(cards);
        setLoading(false);
      } catch (e) {
        console.error(e.message);
        // TODO: Show error alert
      }
    })();
  }, []);

  const initCards = (cards: Cats[]): ICard[] => {
    let minifiedCards: ICard[] = [];
    for (const card of cards) {
      const { id, url } = card;
      minifiedCards.push({ id, image: url, touched: false });
    }
    console.log(minifiedCards);

    return minifiedCards;
  };

  return (
    <div className="App">
      <ScoreBoard />
      {loading ? 'loading...' : <p>loaded</p>}
      <CardsGrid cards={cards} />
    </div>
  );
const CardsGrid = ({ cards }: CardsGridProps) => (
  <div className="card-grid">
    <h2>Cards Grid</h2>
    {cards.map((card) => {
      card.id;
    })}
  </div>
);

标签： javascriptreactjs

解决方案

问题

CardsGrid映射cardsprop 数组时，您不会返回要在组件中呈现的任何内容。

const CardsGrid = ({ cards }: CardsGridProps) => (
  <div className="card-grid">
    <h2>Cards Grid</h2>
    {cards.map((card) => {
      card.id; // <-- nothing returned/mapped to JSX
    })}
  </div>
);

解决方案

从地图回调中返回有效的 JSX。不要忘记包含 React 键。这是关于最简单/最小的示例。

const CardsGrid = ({ cards }: CardsGridProps) => (
  <div className="card-grid">
    <h2>Cards Grid</h2>
    {cards.map((card) => {
      return (
        <Fragment key={card.id}>
          {card.id}
        </Fragment>
      );
    })}
  </div>
);

你也可以隐式返回 JSX。请注意，大括号 ( {}) 中没有包含函数体。（() => { return value; }对() => value）

const CardsGrid = ({ cards }: CardsGridProps) => (
  <div className="card-grid">
    <h2>Cards Grid</h2>
    {cards.map((card) => (
      <Fragment key={card.id}>
        {card.id}
      </Fragment>
    ))}
  </div>
);

推荐阅读