使用按钮单击反应渲染特定数据

Question

对于我的项目，当我们单击“查看详细信息”按钮时，我试图呈现特定的医生详细信息。就这样——

如何过滤特定的医生数据以将其呈现在 ButtonCl 上的 Card 组件上？目前我正在获取卡片组件的全部数据。在 onClick 事件中，我正在调用导航函数来呈现 Card 组件。因此我无法传输特定医生的数据

这是我的代码—— 路由控制器.js

class RoutingController extends React.Component {
constructor() {
    super();
    this.state = {
        doctorsList: [
            {
                id: 1,
                doctorName: 'Alexis Rodriguez',
                speciality: 'PULMONOLOGIST',
                ratings: 5,
            },
            {
                id: 2,
                doctorName: 'Zeph Gonzales',
                speciality: 'GENRAL_PHYSCIAN',
                ratings: 5,
            },
            {
                id: 3,
                doctorName: 'Virginia Wiggins',
                speciality: 'Dentist',
                ratings: 4,
            }

        ]
    }
}
render() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home doctorsList={this.state.doctorsList} />} />

                <Route path="/doctordetails" element={<ViewDoctorDetails doctorDetails={this.state.doctorsList} />} />

            </Routes>
        </Router>
    );
}

DoctorListComponent.js

    function DoctorListFunctional(props) {

return (
    <div className="main-container">
          {
             props.doctorsListArray.map(doc => {
                    return <div className="doc-container" key={doc.id}>
                        <Paper elevation={10} style={paperStyle}>
                            <Grid align='center'>
                                <div className="doctor-container">
                                    <h3 align='start'>Doctor Name: <span className="grid-item">{doc.doctorName}</span></h3>
                                </div>

                            </Grid>
                            <Grid align='center'>
                                <div className="doctor-details-container">
                                    <h5 align='start'>Speciality: <span className="grid-item">{doc.speciality}</span> </h5>
                                    <h5 align='start'>Ratings:<Rating name="read-only" value={doc.ratings} readOnly /></h5>

                                </div>
                            </Grid>
                            <Stack
                                direction="row"
                                alignItems="flex-end"
                                spacing={3}
                            >
                                <Button className={classes.MuiButtonControlroot} color='primary' variant='contained' onClick={() => onClick()}>
                                    Book Appointment
                                </Button>

                                <Button className={classes.MuiButtonControlroot} color='success' variant='contained' onClick={() => {
                                    navigate("/doctordetails");
                                }}> **Here due to navigate function, I am not able to filter and transfer the specific doctor data to the next card component**
                                    View Details
                                </Button>

                            </Stack>
                        </Paper>
                    </div>
                })
            }

        </Grid>
    </div>

)
}

ViewDoctorDetailsCardComponent.js

function ViewDoctorDetails(props) {
const navigate = useNavigate();
return (
    <div className="main-container">
        {
            props.doctorDetails.map((doctor => {
                console.log(doctor);
                return (
                <div key={doctor.id}>
                    {doctor.doctorName} &nbsp;
                    {doctor.speciality} &nbsp;
                    {doctor.ratings} &nbsp;


                </div>
                )
            }))
        }

Answer 1

我建议在路径中添加医生id路由匹配参数，可以过滤传递的医生列表属性。

<Route
  path="/doctordetails/:id"
  element={<ViewDoctorDetails doctorDetails={doctorsList} />}
/>

在ViewDoctorDetails 中按id 匹配参数过滤。请注意数据中的id 属性是number 类型，并且URL 路径值将总是 是string 类型，因此请记住确保使用安全类型平等检查。这里将doctor.id 属性转换为字符串。

import { useParams } from 'react-router-dom';

function ViewDoctorDetails(props) {
  const { id } = useParams();
  return (
    <div className="main-container">
      {props.doctorDetails
        .filter((doctor) => doctor.id.toString() === id.toString())
        .map((doctor) => (
          <div key={doctor.id}>
            {doctor.doctorName} &nbsp;
            {doctor.speciality} &nbsp;
            {doctor.ratings} &nbsp;
          </div>
        ))
      }
    </div>
  );
}

或者，您可以在路线状态下发送特定医生的详细信息。

<button
  ...
  onClick={() => {
    navigate("/doctordetails", { state: { doctor: doc } });
  }}
>
  View Details
</button>

...

<Route path="/doctordetails" element={<ViewDoctorDetails />} />

...

function ViewDoctorDetails(props) {
  const { state } = useLocation();
  const { doctor } = state || {};
  return (
    <div className="main-container">
      <div>
        {doctor.doctorName} &nbsp;
        {doctor.speciality} &nbsp;
        {doctor.ratings} &nbsp;
      </div>
    </div>
  );
}

Answer 2

首先，您不需要将医生的详细信息列表保存为状态的一部分，而只需将其保存为标准数组即可。然后你可以把选中的医生的id作为状态的一部分存储起来，点击查看详情按钮就可以设置选中的医生的详情。

constructor() {
    super();
    this.state = {
        selectedDoc = null
    }
    this.doctorsList = [
...

其次，当您导航到新页面时，您很可能只需从后端请求该特定医生的详细信息，因此您需要在 url 中包含 ID。但是为什么不直接使用模态或下拉来显示细节（因为 react 确实提倡使用单页应用程序方法）

尽管如此，您仍然可以使用 react 路由器 (how to pass props one page to another page via react router?) 将所需的数据传递到下一页