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

这是我第一个使用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 addTrade=async（）=>{
const pokemonList=等待异步数据（）；
const cards=pokemonList.cards；
控制台.日志（卡片）；
返回
handleActiveTab（e）}className={tradeBoard.activeTab==='1'？'trade-tab-trade-tab-active'：'trade-tab'}>
有
{tradeBoard.has.map（has=>
{has.content}
)}
handleActiveTab（e）}className={tradeBoard.activeTab==='2'？'trade-tab-trade-tab-active'：'trade-tab'}>
欲望
{tradeBoard.wants.map（wants=>
{wants.content}
)}
搜索神奇宝贝
{cards.map（（卡片，索引）=>
handleClickContent（）}key={index}>
)}
添加交易
;
};

应用程序：

const-App=（）=>{
返回useObserver（（）=>(
{addTrade（）}
{showTrades（）}
));
};
const roottype=document.getElementById（'root'）；
const headtype=document.getElementById（'header'）；
render（，roottype）；
ReactDOM.render（，头型）；

您需要为此使用react钩子 首先，您需要从react库中导入useState、useCallback，如下所示：从“react”导入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>
  </>;
};

const addTrade=async（）=>{
const[cards，setCards]=useState（null）
useffect（（）=>{
异步函数getData（）{
试一试{
const pokemonList=等待异步数据（）；
const cardsList=pokemonList.cards；
设置卡片（卡片列表）；
控制台日志（cardsList）；
}捕获（错误）{
console.log（错误）；
}
}
getData（）；
}，[卡片]；
返回
handleActiveTab（e）}className={tradeBoard.activeTab==='1'？'trade-tab-trade-tab-active'：'trade-tab'}>
有
{tradeBoard.has.map（has=>
{has.content}
)}
handleActiveTab（e）}className={tradeBoard.activeTab==='2'？'trade-tab-trade-tab-active'：'trade-tab'}>
欲望
{tradeBoard.wants.map（wants=>
{wants.content}
)}
搜索神奇宝贝
{cards.map（（卡片，索引）=>
handleClickContent（）}key={index}>
)}
添加交易
;
};

我在哪里定义useEffect函数？哦，我不知道这是一个react函数。我导入了它，但我仍然得到对象作为react子对象无效，错误[object promise]否api工作正常，我可以获取它。但是当我尝试渲染addTrade时，它会给我错误。

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>
  </>;
};