我可以将整个 API 响应合并到 React 中的一个表中吗？

Question

我有 3 个 API 端点，它们具有不同的响应主体，并且它们有一个公共列“ID”。我正在使用 React-Table，因此在文件 'Columns.js' 中定义了我需要响应中的哪些列。但是在 axios.get 函数中，它对 3 个端点中的每一个都给了我这个错误：

Uncaught TypeError: Cannot read property 'forEach' of undefined
    at accessRowsForColumn (react-table.development.js:1453)
    at react-table.development.js:1123
    at updateMemo (react-dom.development.js:15828)
    at Object.useMemo (react-dom.development.js:16368)
    at Object.useMemo (react.development.js:1499)
    at useTable (react-table.development.js:1115)
    at Datatable (Datatable.js:8)
    at renderWithHooks (react-dom.development.js:14969)
    at updateFunctionComponent (react-dom.development.js:17291)
    at beginWork (react-dom.development.js:18944)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3919)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3968)
    at invokeGuardedCallback (react-dom.development.js:4028)
    at beginWork$1 (react-dom.development.js:23775)
    at performUnitOfWork (react-dom.development.js:22614)
    at workLoopSync (react-dom.development.js:22548)
    at renderRootSync (react-dom.development.js:22514)
    at performSyncWorkOnRoot (react-dom.development.js:22131)
    at react-dom.development.js:11379
    at unstable_runWithPriority (scheduler.development.js:651)
    at runWithPriority$1 (react-dom.development.js:11325)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11374)
    at flushSyncCallbackQueue (react-dom.development.js:11362)
    at scheduleUpdateOnFiber (react-dom.development.js:21731)
    at dispatchAction (react-dom.development.js:16095)
    at App.js:20
    at async getData (App.js:16)

这就是我的 get 函数的样子：

useEffect(() => {
    async function getData() {
      await axios.all([
        axios.get('http://localhost:8080/api/v1/a/findAll'),
        axios.get('http://localhost:8080/api/v1/b/findAll'),
        axios.get('http://localhost:8080/api/v1/c/findAll')
      ])
      .then(response => {
        setData(response.data);
        console.log(response.data);
      });
    }
      getData();
  }, []);

然后将此作为 prop 值传递给组件：

<Datatable columns={columns} data={data}/>

我假设 axios.all 在这里不起作用，它适用于一两个值，我是否必须循环响应？如果有怎么办？ ID 来自 API，我没有。 同样作为参考，这是我的组件的样子

export default function Datatable ({ columns, data }) {
  
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data
  })

  return (
    <div>
    return (
    <ReactBootStrap.Table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              })}
            </tr>
          )
        })}
      </tbody>
      </ReactBootStrap.Table>
      </div>
  )
}

Answer 1

您必须从响应中提取数据。因为response 包含所有响应的数组。

response.data 将是 undefined，因为数组上没有名为 data 的属性。

async function getData() {
  await axios
    .all([
      axios.get("https://jsonplaceholder.typicode.com/todos/1"),
      axios.get("https://jsonplaceholder.typicode.com/todos/2"),
      axios.get("https://jsonplaceholder.typicode.com/todos/3"),
    ])
    .then((response) => {
      const result = response.map((r) => r.data);
      console.log(result);
      // setData(result)
    });
}
getData();

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>