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

Question

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

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

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

首先，您不需要将医生的详细信息列表保存为 state 的一部分，而只需将其保存为标准数组即可。 然后您可以将所选医生的 ID 存储为 state 的一部分，并在单击查看详细信息按钮时设置所选医生的详细信息。

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

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

尽管如此，您仍然可以使用反应路由器将所需的数据传递到下一页（ 如何通过反应路由器将道具一页传递到另一页？ ）

Answer 2

我建议在路径中添加一个医生 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>
  );
}

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

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