React中如何通过函数实现组件间JSON数据传递（含忘记密码场景示例）

你的场景是路由跳转时带参数传递JSON数据，用react-router自带的路由传参能力就可以实现，不需要额外引入工具，下面是具体实现步骤：

方案1：路由state传参（最适配当前场景） #

你已经引入了react-router-dom的useHistory，直接用它的跳转传参能力即可：

第一步：修改VerifyUser组件代码 #

import React, { Fragment, useState } from 'react';
import ForgetPassword from './ForgetPassword';
import { useHistory } from 'react-router-dom';

const VerifyUser = ({ setAuth }) => {
  let [parseData, setParseData] = useState('');
  // 实例化history
  const history = useHistory();

  const [inputs, setInputs] = useState({
    email: '',
  });

  const onChange = (e) => {
    setInputs({ ...inputs, [e.target.name]: e.target.value });
  };

  const onSubmitForm = async (e) => {
    try {
      e.preventDefault();
      const body = { email };
      const bodyFile = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body),
      };
      const response = await fetch(
        'http://localhost:5000/forgetpassword/verifyuser',
        bodyFile
      );
      const parseRes = await response.json();
      setParseData(parseRes);
      // 校验用户存在后跳转，把数据放到路由state中
      // 这里可以根据你的接口返回结构加判断，比如parseRes.code === 200再跳转
      history.push('/security-question', {
        securityData: parseRes,
        userEmail: email
      })
    } catch (err) {
      console.error(err.message);
    }
  };

  const { email } = inputs;

  return (
    <Fragment>
      <div className='wrapper fadeInDown formAdjustmentLoginPage'>
        <div id='formContent'>
          <div className='fadeIn first'></div>
          <form className='formFunctions' onSubmit={onSubmitForm}>
            <input
              type='email'
              id='email'
              className='fadeIn second'
              name='email'
              placeholder='Email'
              value={email}
              onChange={(e) => onChange(e)}
            />
            <button type='submit' className='fadeIn fourth'>
              Submit
            </button>
            <h1>{parseData}</h1>
          </form>
        </div>
      </div>
    </Fragment>
  );
};
export default VerifyUser;

注意把/security-question替换成你实际的安全问题页面路由地址

第二步：安全问题页面接收数据 #

在你的安全问题回答组件中用useLocation获取传递的参数：

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

const SecurityQuestionPage = () => {
  const location = useLocation();
  // 拿到传递过来的JSON数据，加默认值防止刷新报错
  const { securityData, userEmail } = location.state || {};

  return (
    <div>
      {/* 直接渲染安全问题即可 */}
      <p>安全问题：{securityData?.question}</p>
      <input placeholder='请输入答案' />
    </div>
  )
}

这个方案的缺点是页面刷新后state会丢失，如果需要支持刷新不丢数据，可以用方案2

方案2：sessionStorage持久化传参 #

如果需要支持用户刷新页面后数据不丢失，可以用sessionStorage做临时存储：

1. 在VerifyUser组件拿到parseRes后，添加代码：

sessionStorage.setItem('security_verify_data', JSON.stringify({
  securityData: parseRes,
  userEmail: email
}))
// 再跳转路由
history.push('/security-question')

2. 在安全问题页面取值：

// 组件加载时取数据
const [securityData, setSecurityData] = useState({})
useEffect(() => {
  const data = JSON.parse(sessionStorage.getItem('security_verify_data') || '{}')
  setSecurityData(data.securityData || {})
  // 用完就删除，避免残留数据
  sessionStorage.removeItem('security_verify_data')
}, [])

其他可选方案 #

如果你的项目已经接入了全局状态管理工具（比如Redux、MobX、Context API），也可以把接口返回的安全问题存在全局状态中，跳转后直接从全局状态读取即可，更适合多页面需要共享这个数据的场景。

内容的提问来源于stack exchange，提问作者talha.io