如何在网格/表格中呈现来自 axios.get() 的响应

Question

我的应用程序特定部分的功能存在一些问题。 我在 react 中有一个功能组件“Review Rounds”，它执行 axios.get 请求。然后将响应用于 setState 的“rounds”数组。这部分工作正常。这是回复

[
{
    "label": null,
    "consent": false,
    "users": [],
    "videoLink": "Hospital.mp4",
    "id": "1da10881-b27d-46a5-883e-02296c9a6ab8",
    "roundId": "1da10881-b27d-46a5-883e-02296c9a6ab8",
    "idConfirmed": false
},
{
    "label": null,
    "consent": false,
    "users": [],
    "videoLink": "Hospital.mp4",
    "id": "2abac091-57f4-4dec-8c0a-7b370794b081",
    "roundId": "2abac091-57f4-4dec-8c0a-7b370794b081",
    "idConfirmed": false
},
{
    "label": null,
    "consent": false,
    "users": [],
    "videoLink": "Hospital.mp4",
    "id": "b68724dc-36b2-41b3-b677-b7ff98bac875",
    "roundId": "b68724dc-36b2-41b3-b677-b7ff98bac875",
    "idConfirmed": false
},
{
    "label": null,
    "consent": false,
    "users": [],
    "videoLink": "Hospital.mp4",
    "id": "ec99c8cf-d180-4e2a-a246-875f7342d867",
    "roundId": "ec99c8cf-d180-4e2a-a246-875f7342d867",
    "idConfirmed": false
}]

然后我想仅在表格中显示 videoLink 和 roundId 属性。

我已经创建了一个这样的列变量

   //Table Cols


const columns = React.useMemo(
    ()=>[
    {
      Header:"videoLink",
      accessor:"videoLink"
    },
    {
      Header:"roundId",
      accessor:"roundId"
    },
  ],
  []
  )

然后定义表格道具并传入列和轮：

const{
getTableProps,
 getTableBodyProps,
 headerGroups,
 rows,
 prepareRow,
 } =useTable({columns , rounds})

我遇到的问题是轮次（在这个阶段似乎不包含任何数据）尽管它以前包含我需要的所有信息。 我对国家做错了什么吗？还是 useEffect 方法？

下面是这个功能组件的完整代码：

const ReviewRounds = () => {
const [rounds, setRounds]=useState([]);


 const fetchVids=()=>{
   
  axios.get(process.env.REACT_APP_URL_All_ROUNDS)
   .then(res=>{
    console.log("Rounds", res.data)
    setRounds(res.data)
   });
  };

  useEffect(()=>{
    fetchVids();
  },[]) 

   //Table Cols
  const columns = React.useMemo(
    ()=>[
    {
      Header:"videoLink",
      accessor:"videoLink"
    },
    {
      Header:"roundId",
      accessor:"roundId"
    },
  ],
  []
  )





  const{
    getTableProps,
     getTableBodyProps,
     headerGroups,
     rows,
     prepareRow,
  } =useTable({columns , rounds})

  return (
    <table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th
                {...column.getHeaderProps()}
                style={{
                  borderBottom: 'solid 3px blue',
                  background: 'aliceblue',
                  color: 'black',
                  fontWeight: 'normal',
                }}
              >
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return (
                  <td
                    {...cell.getCellProps()}
                    style={{
                      padding: '10px',
                      border: 'solid 1px gray',
                      background: 'aliceblue',
                    }}
                  >
                    {cell.render('Cell')}
                  </td>
                )
              })}
            </tr>
          )
        })}
      </tbody>
    </table>
  )
} 

导出默认 ReviewRounds；

我得到的错误是：

TypeError: Cannot read properties of undefined (reading 'forEach')

Answer 1

会说你的 useTable 钩子不希望通过 rounds 作为数据的道具，因为状态代码看起来不错。

尝试useTable({columns , rows: rounds}) 之类的东西或任何钩子期望的东西。