使用API​​数据在React.js中创建React表

Question

我以前已经看到了一些使用API​​数据创建React表的示例，但是没有人使用API​​数据中的标头（键）将标题设置为React Table中的标题。请有人帮我这样做。

在我的代码中，我从数组中的API数据中提取了标题。然后，我需要将这些值作为标题和登录器值传递。但是我不明白该怎么做。

这是api = https://reqres.in/api/api/users?page=1

I am fetching data from this Axios API in a hook :

import axios from 'axios';
let userRole;
const [userData, setUserData] = useState({});

useEffect(()=>{

  axios.get(`https://reqres.in/api/users?page=1`)
  .then(res => {
      userRole = res.data.data;
      console.log("Data from API",userRole);
      userRole.sort((a,b) => a.first_name.localeCompare(b.first_name) )
      setUserData(userRole);
  });

}, []);

//console.log(userData);

API Data from UserRole looks like this : 在此处输入图像描述

let headerList = [];
function BasicTableComponent() {

          //console.log("Full data in array",userData)

          // EXTRACT VALUE FOR HTML HEADER. 
        for (var i = 0; i < userData.length; i++) {
            for (var key in userData[i]) {
                if (headerList.indexOf(key) === -1) {
                    headerList.push(key);
                }
            }
        }

        console.log("Column Header List check",headerList);

/*Now instead of this hardcoded method I want to pass values 
from my headerList for Header and accessor in my columns.*/

         const columns = React.useMemo(
            () => [
              {
                Header: 'Column 1',
                accessor: 'col1', // accessor is the "key" in the data
              },
              {
                Header: 'Column 2',
                accessor: 'col2',
              },
            ],
            []
          )

        //console.log("Column Header",columns)

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

    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 red',
                   background: 'aliceblue',
                   color: 'black',
                   fontWeight: 'bold',
                 }}
               >
                 {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: 'papayawhip',
                     }}
                   >
                     {cell.render('Cell')}
                   </td>
                 )
               })}
             </tr>
           )
         })}
       </tbody>
     </table>
    )
}

Answer 1

根据我的理解，您正在寻求创建具有两个属性的对象。一个是“列名”，将用作表格中的标头，第二个是“键”，用于访问“ UserData”的值。

1. 我已经修改了使用效果以检索数据，设置UserData并设置列。

2. 由于您希望列保存动态数据，因此我将该部分放置在使用效果中，因为它取决于我们从API中检索的数据。抱歉，没有正确格式化代码。

     const parentcomponent =（props）=＆gt; {
    const [userdata，setUserData] = usestate（{}）;
    const [加载，setloading] = usestate（false）;
    const [列，setColumns] = usestate（[]）;
   
    const getData = async（）=＆gt; {
      等待axios.get（“ https://reqres.in/api/users?page=1”）。
      令data = resp.data.data.sort（（a，b）=＆gt;
       a.first_name.localecompare（b.first_name）
     ）；
      令cols = object.keys（data [0]）。map（（key）=＆gt; {
        返回 {
          标题：key.touppercase（），
          访问者：键
        };
      }）;
      setuserdata（数据）;
      SetColumns（COLS）；
      setloading（false）;
    }
   
   
   useeffect（（）=＆gt; {
    setloading（true）;
    getData（）;
   }，[]）;
   
   返回（
    ＆lt; tablecomponent列= {columns} userdata = {userdata} /＆gt;
   ）