使用反应从页面导入数据

Question

我有一个 web 应用程序在反应，我有两个注册页面，一个用户和下一个注册项目的地方，我需要获取在上一页注册的用户 ID 才能在下一页注册项目。

但我无法导入 id，因为它在 function 中，所以我无法获取

export default function Register({ history }) {
    const [username, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const [passwd, setPasswd] = useState('');

    async function handleSubmit(e) {
        e.preventDefault();

        const response = await api.post('/createUser',  {
            username, email, passwd,
        });

        console.log(response.data);
        const { _id: _idUser } = response.data;

        history.push(`/freela/${_idUser}`);
    }

我正在尝试像这样导入

import { _idUser } from './Register';

他返回给我这个错误：

路线：

Answer 1

我认为您正在使用react-router或react-router-dom进行导航。

对于这两个库，您都可以将一些数据作为道具传递给下一个组件，例如在您的情况下 -

history.push( /freela/${_idUser} , _idUser);

在您的下一个组件中，您可以通过

props.location.state

但最好的方法是从参数中获取它，因为您的 url 中有该 ID。

通过使用react-router-dom中的useParams钩子；

链接到示例 - https://reacttraining.com/react-router/web/example/url-params

Answer 2

快速建议：由于您在history.push('/freela/${_idUser}中推送idUser ，您可能可以从 URL 中提取_idUser