在React 18中无法通过链接将Props传递给子代组件

Question

父组件(UserList Component):

const UsersList = (props) => {    
const removeCandidateById = (id) => {
props.removeCandidateDetails(id);
}    
const RenderUsersList = props.CandidateDetails.map((userDetails) => {
return (
<UserCard userDetails={userDetails} removeUser={removeCandidateById }  key={userDetails.id}/>
)
}) 

从UserCard Component开始，我想通过Linkstate对象(如state: { userDetails: this.props.userDetails })将道具数据传递给另一个子组件，但在/userDetail路径中配置的孙子组件中始终未定义。

我也尝试过功能组件的方式。通过链接我无法得到这个问题的解决方案。

子组件(UserCard组件):

class UserCard extends React.Component {
constructor(props) {
super(props);
const { id, name, age, occupation, phone, imgUrL } = props.userDetails;
}
render() {
return (
<Col className="col col-lg-2 mb-3 mt-4">
<div className="card">
<div className="card-body">
<h5 className="card-title"> {this.name}</h5>
<Link
to={{
pathname: `/userDetail/${this.id}`,
state: { userDetails: this.props.userDetails },
}}
>
<img
className="img"
src={avatar}
style={this.imgStyle}
alt="avatar"
/>
</Link>
</div>
</div>
</Col>
);
}
}
export default UserCard;

Answer 1

正如你所说，你的react-router-dom版本是6.3.0。在新版本中，您可以为Link设置不同的状态。传递给toprop的对象中的状态值将被忽略，因此您需要在stateprop中单独传递状态。

<Link
to={{
pathname: `/userDetail/${this.id}`,
}}
state={{ userDetails: this.props.userDetails }}
>
<img
className="img"
src={avatar}
style={this.imgStyle}
alt="avatar"
/>
</Link>

现在，为了访问状态，您可以从react-router-dom的useLocation钩子中提取state。

const { state } = useLocation();
// you have two ways to access userDetails
const { userDetails } = state // 1
const userDetails = state.userDetails // 2