Async / await React: объекты недействительны, [обещание объекта] - PullRequest
Новая
       8

Async / await React: объекты недействительны, [обещание объекта]

0 голосов
/ 26 февраля 2020

Это мой первый проект, работающий с React, и я загружаю API. Я пытаюсь передать данные, но они продолжают выдавать мне ту же ошибку, однако я делаю это.

Кроме того, я могу регистрировать данные в асинхронной c функции 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);

1 Ответ

0 голосов
/ 26 февраля 2020

вам нужно использовать реакционные хуки, для этого сначала вам нужно импортировать useState, useCallback из библиотеки реагирования, как это import React, { useState, useCallback } from "react";, затем использовать 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>
  </>;
};
...