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

您需要为此使用react钩子首先，您需要从类似import React, { useState, useCallback } from "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>
  </>;
};

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

1 个答案: