如何从 axios GET 请求中渲染表格？

Question

我正在尝试从 NBA API 呈现统计数据表。我正在使用 redux 来存储用户选择的玩家并通过我的 Table 组件请求 API。我适当地检索了统计信息，但它最终会无限地请求 API。我知道我在异步请求中设置钩子会导致这种行为，但我目前不确定解决方法。我认为这是一个生命周期错误，我是否应该尝试使用 useEffect 并将来自 redux 的播放器对象存储在依赖数组中？任何输入都会很棒。我将在下面发布代码。

这是我记录 cData 时的行为和控制台日志的屏幕截图： https://imgur.com/3WNsZt9

Table.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() 中调用一个方法，例如在您的 action.js 中调用 this.getNBAdata()，这将从 API 获取数据。一旦您在.then() 中收到数据，您应该将带有有效负载数据的操作发送到reducer，我们可以通过添加mapStatetoProps() 您的表组件来使用它，因此一旦您在props 变量中收到数据，它将重新加载/刷新特定的组件，在 .map() 的帮助下，您应该能够在表格中显示数据。

Action.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'});
    }
  });
 }
};