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

【问题标题】：How to make array dynamic in ReactJS?如何在 ReactJS 中使数组动态化？
【发布时间】：2022-01-06 06:09:02
【问题描述】：

我想让我的表行动态化，以便它可以自动从 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

【问题讨论】：

也许你需要通过setCampusValues(response.data.rows)更新campusValues
我想用 MySQL 中的数据替换行中的值，这就是我使用 Axios 的原因。我可以从 MySQL 中获取数据，但我的问题是我无法用行的值替换它。

标签： arrays reactjs dictionary dynamic

【解决方案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> 
            }
        })

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。