异步/等待反应：对象无效，[对象承诺]

Question

这是我第一个使用 React 的项目，我正在获取一个 API。我正在尝试传递数据，但它总是给我同样的错误，但是我这样做了。

另外，我可以在异步函数 addTrade 中记录数据，但由于某种原因它记录了两次？

获取：

async function asyncData() {
  const response = await fetch('https://api.pokemontcg.io/v1/cards?setCode=base1');
  const data = await response.json();
  return data;
}

我的渲染函数：

const addTrade = async () => {
  const pokemonList = await asyncData();
  const cards = pokemonList.cards;
  console.log(cards);
  return <>
    <div className='add-trade-container'>
      <div className='trade-add-window'>

        <div id={1} onClick={e => handleActiveTab(e)} className={tradeBoard.activeTab === '1' ? 'trade-tab trade-tab-active' : 'trade-tab'}>
          <span className='trade-tab-title'>Has</span>
          {tradeBoard.has.map(has =>
            <>
              <div className={tradeBoard.activeTab === '1' ? 'window window-active' : 'window'}>{has.content}</div>
            </>
          )}
        </div>
        <img className='divider' src='./src/assets/img/trade-icon.svg' width='30' height='30'></img>

        <div id={2} onClick={e => handleActiveTab(e)} className={tradeBoard.activeTab === '2' ? 'trade-tab trade-tab-active' : 'trade-tab'}>
          <span className='trade-tab-title'>Wants</span>
          {tradeBoard.wants.map(wants =>
            <>
              <div className={tradeBoard.activeTab === '2' ? 'window window-active' : 'window'}>{wants.content}</div>
            </>
          )}
        </div>
      </div>
      <article className='list'>
        <label className='search-label' htmlFor='search'>Search a Pokémon
          <input className='search-field' type='text' id='search'></input>
        </label>
        <div className='list-grid'>
          {cards.map((card, index) =>
            <div onClick={() => handleClickContent(<PokeItem pokemon={card} index={index}/>)} key={index}>
              <PokeItem pokemon={card} index={index}/>
            </div>
          )}
        </div>
      </article>
      <button onClick={handleSeedClick} className='button-add'>Add a trade</button>
    </div>
  </>;
};

应用：

const App = () => {
  return useObserver(() => (
    <>
      {addTrade()}
      <div className='trades'>
        {showTrades()}
      </div>
    </>
  ));
};

const roottype = document.getElementById('root');
const headtype = document.getElementById('header');
ReactDOM.render(<App />, roottype);
ReactDOM.render(<Header />, headtype);

Answer 1

你需要为此使用反应钩子 首先你需要像这样import React, { useState, useCallback } from "react";从反应库中导入useState，useCallback 然后像这样使用 useEffect：

const addTrade = async () => {
  const [cards,setCards] = useState(null)
  useEffect(() => {
    async function getData() {
      try {
        const pokemonList = await asyncData();
        const cardsList = pokemonList.cards;
        setCards(cardsList);
        console.log(cardsList);
      } catch (error) {
        console.log(error);
      }
    }
    getData();
  }, [cards]);
   return <>
    <div className='add-trade-container'>
      <div className='trade-add-window'>

        <div id={1} onClick={e => handleActiveTab(e)} className={tradeBoard.activeTab === '1' ? 'trade-tab trade-tab-active' : 'trade-tab'}>
          <span className='trade-tab-title'>Has</span>
          {tradeBoard.has.map(has =>
            <>
              <div className={tradeBoard.activeTab === '1' ? 'window window-active' : 'window'}>{has.content}</div>
            </>
          )}
        </div>
        <img className='divider' src='./src/assets/img/trade-icon.svg' width='30' height='30'></img>

        <div id={2} onClick={e => handleActiveTab(e)} className={tradeBoard.activeTab === '2' ? 'trade-tab trade-tab-active' : 'trade-tab'}>
          <span className='trade-tab-title'>Wants</span>
          {tradeBoard.wants.map(wants =>
            <>
              <div className={tradeBoard.activeTab === '2' ? 'window window-active' : 'window'}>{wants.content}</div>
            </>
          )}
        </div>
      </div>
      <article className='list'>
        <label className='search-label' htmlFor='search'>Search a Pokémon
          <input className='search-field' type='text' id='search'></input>
        </label>
        <div className='list-grid'>
          {cards.map((card, index) =>
            <div onClick={() => handleClickContent(<PokeItem pokemon={card} index={index}/>)} key={index}>
              <PokeItem pokemon={card} index={index}/>
            </div>
          )}
        </div>
      </article>
      <button onClick={handleSeedClick} className='button-add'>Add a trade</button>
    </div>
  </>;
};