如何在 ReactJS 中使数组动态化？

Question

我想让我的 table 行动态化，以便它可以自动从 MySQL 数据库添加新数据，但我不知道如何做。你能帮助我吗？非常感谢！

这是我想动态化的静态数据。每当我输入 'campusValues.map' 时我都会出错。它给了我一条消息''，'预期'。

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

我通过尝试下面的这段代码得到了答案。 :)

  rows : campusValues?.map((val, key) => {
            return {
                Campus_name: `${val.campus_description}`,
                tel_number: `${val.campus_telephone_number}`,
                campus_head: `${val.campus_head}`,
                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> 
            }
        })

如何在 ReactJS 中使数组动态化？

How to make array dynamic in ReactJS?

arrays

dictionary

dynamic

reactjs