如何在 ReactJS 中動態創建表？

Question

我想讓我的表行動態化，以便它可以自動從 MySQL 數據庫添加新數據，但我不知道如何。 你能幫助我嗎？

這是我想要動態化的 static 數據。

 const data = {
   rows: [
 {
  Campus_name: 'National Arabella SHS',
  tel_number: ' 123-12-123',
  action: 
  <div className='action-icon-container'>
        <Tooltip title="Edit" trigger="hover">
            <Link to='/admin/campus/edit-campus/:id' state={{bc_edit_type : 1}}><MdEdit className='action-icon edit' /></Link>
        </Tooltip>
    </div> 
},
{
    Campus_name: 'College of Arabella - Main',
    tel_number: ' 123-12-123',
    action: 
    <div className='action-icon-container'>
        <Tooltip title="Edit" trigger="hover">
            <MdEdit className='action-icon edit' />
        </Tooltip>
    </div> 
  },
  {
    Campus_name: 'College of Arabella Extension',
    tel_number: ' 123-12-123',
    action:
    <div className='action-icon-container'>
        <Tooltip title="Edit" trigger="hover">
            <MdEdit className='action-icon edit' />
        </Tooltip>
    </div> 
  },
]

};

這是我從數據庫中獲取數據並將其存儲在“campusValues”變量中的部分。

const CampusPage = () => {
  
  const [campusValues, setCampusValues] = useState([]);

  const GetCampusValues = () => {
     Axios.get("http://localhost:5000/campusValues").then((response) => {
       console.log(response);
       setCampusValues(response.data);
  });
 }

useEffect(() => {
   let ignore = false;
   if (!ignore)  
   GetCampusValues();
   return () => { ignore = true; }
},[]);

 return (...);
}

 export default CampusPage

Answer 1

要制作動態表，只需 map 表行：

<table>
  <tr>
    <th>...</th>
    <th>...</th> 
    <th>...</th>
  </tr>

  {
    campusValues.map(value => (
  <tr key={...}>
    <td>{value.id}</td>
    <td>{value.name}</td> 
    <td>...</td>
  </tr>
    ))
  }
</table>