Question

2021-10-18

1012

reactjs

我有两个组件，我想将数据从其他组件传递给其他组件。我尝试使用此代码，但出现此错误：

未捕获 TypeError：无法读取未定义的属性（读取“params”）

它正在发送数据，但发送的是空数据。我该如何解决这个问题？

front.layout.js

import Profile from '../../Views/profile'

const [user, setUser] = useState({});

 return (
    <>
       <Profile values={user} />
    </>
 )

index.js

import Layout from "../../Components/layouts/front.layout";

const Profile = (props) => {
    const { params } = props.match;
    .
    . 
    .
}

Answer 1

这里有几点需要注意：

下面用一个空对象初始化 user ，因此您无法从中进行解构。

const [user, setUser] = useState({});

然后，您传递名为 values 的 props，其值为 user 。

因此，在您的容器中，您可以设置 params 的默认值。

const [user, setUser] = useState({ params: {} });

然后，您可以在您的组件中对其进行解构（来自 prop.values ）

const Profile = (props) => {
    const { params } = props.values;
    .
    . 
    .
}

Answer 2

您需要使用 withRouter () 函数包装此组件您可以像这样导入此组件：

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



export default withRouter (component-name);