React 15.2.1组件传值：从Login.js向Products.js传递邮箱密码

首先，咱们先梳理下现有代码里的两个核心问题：

1. Login组件跳转时没有传递邮箱和密码到Products组件；
2. Products里的display函数用了同步方式处理异步HTTP请求，这会导致你拿不到正确的响应数据（因为请求还没完成就返回了）。

下面给你两种可行的解决方案，你可以根据场景选择：

方案一：通过路由状态传递参数（简单直接，适合临时传递） #

这种方式是在跳转路由时把登录信息存在路由的state里，Products组件再从路由props中读取。

1. 修改Login.js的handleSubmit方法 #

在跳转时带上邮箱和密码：

handleSubmit = async event => {
  event.preventDefault();
  try {
    // 把登录信息放到路由state里
    this.props.history.push({
      pathname: "/products",
      state: { 
        email: this.state.email, 
        password: this.state.password 
      }
    });
  } catch (e) {
    alert(e.message);
  }
}

2. 重构Products.js的请求逻辑 #

因为异步请求不能在render里直接同步调用，我们需要把请求放到componentDidMount生命周期里，并且用异步方式处理响应，最后更新组件state来渲染产品列表：

import React from 'react';

export class Products extends React.Component {
  constructor(props) {
    super(props);
    this.state = { products: [] };
  }

  componentDidMount() {
    // 从路由state中获取登录信息
    const loginInfo = this.props.location.state;
    if (!loginInfo?.email || !loginInfo?.password) {
      // 如果没有登录信息，跳回登录页
      this.props.history.push("/");
      return;
    }

    // 用fetch发起异步请求（也可以继续用XMLHttpRequest，这里更简洁）
    fetch("你的接口地址", {
      method: "POST", // 根据你的接口要求调整方法
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        email: loginInfo.email,
        password: loginInfo.password
      })
    })
    .then(response => {
      if (!response.ok) throw new Error("请求失败");
      return response.json();
    })
    .then(jsonObject => {
      // 提取产品名称并更新state
      const productNames = jsonObject.map(item => item.completeName);
      this.setState({ products: productNames });
    })
    .catch(err => {
      console.error("获取产品数据出错:", err);
      alert("加载产品失败，请重试");
    });
  }

  render() {
    const { products } = this.state;
    return (
      <div>
        <h2>Product Names</h2>
        {products.length > 0 ? (
          products.map((name, idx) => <div key={idx}>{name}</div>)
        ) : (
          <div>加载中...</div>
        )}
      </div>
    );
  }
}

注意：这种方式的缺点是，如果用户直接刷新/products页面，路由state会丢失，因为它存在内存里。如果需要解决刷新丢失的问题，可以用下面的方案。

方案二：用localStorage持久化存储（解决刷新丢失问题） #

把登录信息存在浏览器的localStorage里，Products组件读取后再清除，避免长期留存敏感信息。

1. 修改Login.js的handleSubmit #

handleSubmit = async event => {
  event.preventDefault();
  try {
    // 把登录信息存到localStorage（注意：生产环境建议加密后存储）
    localStorage.setItem(
      "loginCredentials",
      JSON.stringify({
        email: this.state.email,
        password: this.state.password
      })
    );
    this.props.history.push("/products");
  } catch (e) {
    alert(e.message);
  }
}

2. 修改Products.js的componentDidMount #

componentDidMount() {
  // 从localStorage读取登录信息
  const credStr = localStorage.getItem("loginCredentials");
  if (!credStr) {
    this.props.history.push("/");
    return;
  }
  const { email, password } = JSON.parse(credStr);

  // 发起请求（和方案一的请求逻辑一样）
  fetch("你的接口地址", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ email, password })
  })
  .then(response => response.json())
  .then(jsonObject => {
    const productNames = jsonObject.map(item => item.completeName);
    this.setState({ products: productNames });
    // 用完立即清除localStorage里的敏感信息
    localStorage.removeItem("loginCredentials");
  })
  .catch(err => {
    console.error("请求出错:", err);
    localStorage.removeItem("loginCredentials");
    alert("加载失败，请重新登录");
    this.props.history.push("/");
  });
}

额外提醒 #

• 不要在render方法里直接发起异步请求，因为render会多次执行，会导致重复请求；
• 生产环境下，不要明文存储密码到localStorage，建议用加密算法处理后再存储，或者更好的方式是登录后后端返回token，前端存token，后续请求用token验证，而不是传递密码；
• 你的index.js里路由配置没问题，Route组件会自动把location、history等props传递给Login和Products组件，所以不需要额外处理。

内容的提问来源于stack exchange，提问作者megha aswath