ReactJS使用URLSearchParams读取URL参数返回null问题求助

核心错误原因 #

你获取URL参数时传入的key错误，URL中的查询参数名是phmcy，不是phmcy.value，多写的.value后缀导致匹配不到对应参数，所以返回null。

修复代码（原生写法） #

import Upload from './Upload'
import axios from "axios";
import { Link, withRouter } from "react-router-dom";
import { useLocation } from 'react-router';

export default function Uploadlist() {
    // 修正参数key为phmcy
    let myphmcy = (new URLSearchParams(window.location.search)).get("phmcy")    
    console.log(myphmcy); // 此时输出为预期的2
// 剩余代码未补充

适配React Router的规范写法 #

你已经引入了useLocation hook，更推荐用它获取search参数，避免直接操作window.location带来的路由同步问题，写法如下：

export default function Uploadlist() {
    const location = useLocation();
    const searchParams = new URLSearchParams(location.search);
    const myphmcy = searchParams.get("phmcy");
    console.log(myphmcy);
// 剩余代码

子组件传值说明 #

拿到myphmcy后，直接通过props传给子组件Upload即可，示例：

// 父组件渲染子组件时传值
<Upload phmcy={myphmcy} />

子组件内直接通过props.phmcy拿到对应值，和表单数据一起提交即可。

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