Как вывести таблицу из топора ios GET запросов?

Question

Я пытаюсь сделать таблицу статистики из API NBA. Я использую Redux для хранения выбранных игроков и запрашиваю API через компонент Table. Я получаю статистику соответствующим образом, но в итоге она бесконечно запрашивает API. Я знаю, что установка хука в асинхронном запросе приведет к такому поведению, но в настоящий момент я не уверен в обходном пути. Я думаю, что это ошибка жизненного цикла, я должен попробовать использовать useEffect и иметь объект player из избыточного хранилища в массиве зависимостей? Любой вклад был бы великолепен. Я выложу код ниже.

Вот скриншот поведения и журнала консоли, когда я регистрирую cData: https://imgur.com/3WNsZt9

Таблица. js

const DataTable = () => {
  const [completeData, setCompleteData] = React.useState([]);
  const players = useSelector(state => state.players);
  var cData = [];

  const search = async val => {
    try {
      const res = await axios(
        `https://www.balldontlie.io/api/v1/season_averages?player_ids[]=${val}`
      );
      const responseData = res.data.data;
      console.log(responseData);
      return responseData;
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
      <h3>2019-2020 Season Averages</h3>

      <Table responsive>
        <thead>
          <tr>
            <th>Player</th>
            <th>Points</th>
            <th>Assists</th>
            <th>Rebounds</th>
            <th>Steals</th>
            <th>Blocks</th>
            <th>Turnovers</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(players).map(function(item, i) {
            var currentPlayerData = {};
            currentPlayerData = search(players[item])
              .then(result => {
                cData = JSON.parse(JSON.stringify(result[0]));
                console.log(cData);
                setCompleteData(old => [...old, cData]);

                // setCurrentData(cData);
              })
              .catch(err => {
                console.log(err);
              });
          })}
          {completeData &&
            completeData.map(function(item, i) {
              console.log(item);
              return (
                <tr key={i}>
                  <td>{item.id}</td>
                  <td>{item.pts}</td>
                  <td>{item.ast}</td>
                  <td>{item.reb}</td>
                  <td>{item.stl}</td>
                  <td>{item.blk}</td>
                  <td>{item.turnover}</td>
                </tr>
              );
            })}
        </tbody>
      </Table>
    </div>

Answer 1

Попробуйте этот подход (предполагая, что вы хотите получать данные из NBA API, как только ваш компонент загружается).

Когда ваш компонент таблицы загружается, в componentDidMount() вызовите метод, например, вызовите this.getNBAdata() в вашем действии. js, который будет получать данные из API. Как только вы получите данные в .then(), вам следует отправить действие с данными полезной нагрузки в редуктор, который мы можем использовать, добавив mapStatetoProps () в компонент вашей таблицы, поэтому, как только вы получите данные в переменных props, они перезагрузятся / обновятся sh этот конкретный компонент и с помощью .map () вы сможете отобразить данные в таблице.

Действие. js пример запроса:

export const getNBAData = () => {
  return (dispatch) => {

Axios.get("http://nbadataendpoint.com")
  .then(response => {
    //you will get the data in response object
    dispatch({ type: 'YOUR_SUCCESS', payload: 'SOME_VALUE' });
  })
  .catch(error => {
      dispatch({ type: 'UNAUTHORISED', payload: 'SOME_VALUE'});
    }
  });
 }
};