javascript - 使用按钮单击 react 渲染特定数据

Question

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

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

这是我的代码——RoutingController.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

我建议在路径中添加一个doctor id路由匹配参数，可以过滤传入的doctors list prop。

<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>
  );
}