React页面刷新时Props为空的问题及解决求助

当前实现依赖Home组件的currentNode状态向Add_Category传递key_id，页面刷新时Home组件会重新初始化，currentNode被重置为空对象，导致Add_Category接收的key_id变为null/undefined。而路由参数存储在URL中，刷新时不会丢失，因此需要将key_id纳入路由参数，从URL中读取而非依赖组件状态。

1. 修改树形节点跳转链接，携带key_id参数 #

在ProductsTreeView.js的TreeNode组件中，更新Link的跳转地址，将key_id作为URL参数携带：

// TreeNode组件内的Link部分
<Link 
  to={`/${node.linkpagename}?key_id=${node.key_id}`} 
  style={{ textDecoration: 'none', color: '#000000' }}
>
  {node.description}
</Link>

2. 调整Home组件的Route配置 #

无需再通过props传递key_id，让Add_Category直接从路由参数获取数据：

// Home.js中BodyContainer内的Route
<Route path="/Add_Category">
  <AddCategory />
</Route>

3. 修改Add_Category组件，从URL读取key_id #

在Add_Category中添加URL参数解析逻辑，替换原有的props依赖：

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

export class Add_Category extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ID: "",
      Name: "",
      loading: true
    };
    this.getKeyIdFromUrl = this.getKeyIdFromUrl.bind(this);
  }

  // 解析URL中的key_id参数
  getKeyIdFromUrl() {
    const searchParams = new URLSearchParams(this.props.location.search);
    return searchParams.get('key_id');
  }

  componentDidMount() {
    const key_id = this.getKeyIdFromUrl();
    if (key_id) {
      this.getName(key_id);
    } else {
      this.setState({ loading: false });
    }
  }

  componentDidUpdate(prevProps) {
    // 监听URL变化，更新数据
    if (prevProps.location.search !== this.props.location.search) {
      const key_id = this.getKeyIdFromUrl();
      if (key_id) {
        console.log(`key_id: ${key_id}`);
        this.getName(key_id);
      }
    }
  }

  async getName(ID) {
    try {
      // 注意：这里需要根据实际接口要求，把ID拼接到请求URL中
      const response = await fetch(`${REQUEST_URL}?id=${ID}`);
      const data = await response.json();
      this.setState({
        Name: data,
        ID: ID,
        loading: false
      });
      console.log(this.state.Name);
    } catch (error) {
      console.error('获取分类名称失败:', error);
      this.setState({ loading: false });
    }
  }

  render() {
    if (this.state.loading) {
      return <div>加载中...</div>;
    }
    return (
      <div>
        <form>
          {this.state.Name}
        </form>
      </div>
    );
  }
}

// 用withRouter包裹，让类组件获取路由相关props
export default withRouter(Add_Category);

4. 可选：同步Home组件状态与路由参数（非必需） #

如果需要在未刷新时保持Home组件的currentNode与URL同步，可以在Home组件中监听路由变化：

import React from 'react';
import { Route, withRouter } from "react-router-dom";
import ProductsTree from './ProductsTreeView';
import AddCategory from './Add_Category';

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentNode: {},
      data: "",
      treeNodes: [] // 新增状态存储树形节点数据，需要从ProductsTree传递过来
    };
    this.setCurrentNode = this.setCurrentNode.bind(this);
    this.setTreeNodes = this.setTreeNodes.bind(this);
  }

  setCurrentNode(node) {
    this.setState({ currentNode: node });
  }

  setTreeNodes(nodes) {
    this.setState({ treeNodes: nodes });
  }

  // 根据key_id查找对应节点
  findNodeByKeyId(nodes, keyId) {
    for (const node of nodes) {
      if (node.key_id === keyId) return node;
      const found = this.findNodeByKeyId(node.nodes, keyId);
      if (found) return found;
    }
    return null;
  }

  componentDidMount() {
    // 监听路由变化，更新currentNode
    this.unlisten = this.props.history.listen(() => {
      const searchParams = new URLSearchParams(this.props.location.search);
      const key_id = searchParams.get('key_id');
      if (key_id && this.state.treeNodes.length > 0) {
        const node = this.findNodeByKeyId(this.state.treeNodes, key_id);
        if (node) this.setState({ currentNode: node });
      }
    });
  }

  componentWillUnmount() {
    this.unlisten();
  }

  render() {
    return (
      <div>
        <table className="Container">
          <tbody>
            <tr width="100%">
              <td className="TreeContainer">
                <ProductsTree 
                  setCurrentNode={this.setCurrentNode} 
                  setTreeNodes={this.setTreeNodes} // 传递方法获取树形节点数据
                /> 
              </td>
              <td className="BodyContainer">
                <Route path="/Add_Category">
                  <AddCategory />
                </Route>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

export default withRouter(Home);

同时需要修改ProductsTreeView.js的TreeView组件，调用setTreeNodes方法传递节点数据：

// TreeView组件的componentDidMount
componentDidMount() {
  axios
    .get(REQUEST_URL, { 'Content-Type': 'application/xml; charset=utf-8' })
    .then((response) => {
      const nodes = Node.nodesFromXml(response.data);
      this.setState({ nodes });
      this.props.setTreeNodes(nodes); // 传递节点数据给Home
    })
    .catch(function (error) {
      // 错误处理逻辑不变
    });
}

核心要点 #

• 路由参数是页面刷新时唯一不会丢失的状态载体，跨组件传递关键数据应优先依赖URL参数。
• React类组件需通过withRouter高阶组件注入路由相关props，才能访问location、history等对象。
• 避免依赖组件内部状态传递跨路由的业务数据，刷新时状态会被重置导致数据丢失。

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