React中如何将数据库获取的数据作为props传递给其他组件

你在axios请求的.then回调里创建的info变量是回调作用域内的局部变量，既没有插入到组件return的JSX渲染树中，也没有通过state更新触发React重渲染，回调执行完这个变量就会被回收，哪怕console能正常打印接口数据，页面上也不会渲染出对应的DoctorInfo组件。
另外代码里还有两个容易引发bug的问题：

• 接口post传参错误：你前面从点击事件里拿到了目标id存在id变量里，实际请求传的是未定义的userId
• 直接操作DOM修改样式：event.currentTarget.classList.toggle的写法不符合React状态驱动UI的逻辑，后续很容易出现UI和实际状态不一致的问题

不要在接口回调里直接生成组件节点，用组件state存储接口返回的数据，在return的JSX结构里遍历state渲染组件，React才能正常把内容挂载到页面上：

1. 组件内新增所需状态

import { useState } from 'react';

// 在你的组件函数内部最开头添加
const [activeDoctorList, setActiveDoctorList] = useState([]);
const [isVetSelected, setIsVetSelected] = useState(false);

2. 改造点击事件逻辑，接口返回数据后存入state

const showVetInfo = (event) => {
  // 用state控制选中样式，不要直接操作DOM
  setIsVetSelected(prevState => !prevState);

  const currentId = event.currentTarget.id;
  console.log(currentId);

  // 修正传参，传入当前点击拿到的id，不要传未定义的userId
  axios.post('http://localhost:80/project-api/readActiveDoctor.php', currentId)
  .then((res)=>{
    const resData = res.data;
    console.log(resData);
    // 将接口数据存入state，这一步会自动触发组件重渲染
    setActiveDoctorList(resData);
  })
  .catch(err=>{
    console.log(err);
  });
}

3. 在组件return的JSX结构里添加DoctorInfo的渲染位置，遍历state生成组件

return (
  <div>
    <button  
      onClick={showVetInfo}  
      className={`individual-vet ${isVetSelected ? 'bg-salmon' : ''}`} 
      id={props.uniqueId}   
    >
      <div className='vet-block-img'>  
        <img className='profileImg vet' src={dp}/>
      </div>
      <div className='vet-block-text'>
        <h2>Dr. {props.name + " " + props.surname}</h2>
        <h4>{props.specialization}</h4>
      </div>
    </button>

    {/* 在这里渲染医生信息组件，从state取数据遍历 */}
    <div className="vet-info-wrap">
      {activeDoctorList.map((item) => (
        <DoctorInfo 
          key={item.id} 
          rerender={setRenderActiveVet} 
          uniqueId={item.id} 
          name={item.name} 
          surname={item.surname} 
          specialization={item.specialization} 
          age={item.age} 
          gender={item.gender} 
          email={item.email} 
          contact={item.phoneNumber} 
          doctorId={item.doctorId} 
          room={item.room} 
        />
      ))}
    </div>
  </div>
);

你之前注释掉的setActiveVet、setRenderActiveVet逻辑本身就是用来做状态驱动渲染的，之前没生效本质是两个原因：一是没有把接口数据存入能触发重渲染的state，二是生成的组件节点没有放到JSX渲染树里，React无法感知到这个组件的存在，自然不会显示。

内容的提问来源于stack exchange，提问作者Alexa Pettitt