Javascript ReactJs：从父URL获取数据并将其传递给子组件

我正在从reactjs中的表单发送表单数据。用户的一些预输入必须与表单一起发送。我从父文件的URL获取数据，表单位于子组件中

父url: http://localhost:3000/uploadlist?phmcy=2

我必须从URL获取phmcy值。（此处必须传递的数据为“2”）

父组件：

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

export default function Uploadlist() {
    let phmcy = (new URLSearchParams(window.location.search)).get("phmcy")

    var myphmcy = JSON.stringify(phmcy);
    //const phmcyvalue = new URLSearchParams(this.props.location.search);
    //const phmcy = phmcyvalue.get('phmcy')
    console.log(myphmcy);


    const ordersAPI= (url='https://localhost:44357/api/Orders') => {
        return {
            fetchAll: () => axios.get(url),
            create: newRecord => axios.post(url, newRecord),
            update: (id, updateRecord) => axios.put(url + id, updateRecord),
            delete: id => axios.delete(url+id)
        }
    }
 
    const addOrEdit = (formData, onSuccess) => {

        ordersAPI().create(formData)
        .then(res => {
            onSuccess();
        })
        .catch(err => console.log(err.response.data))
    }

    return (
        <div className="row">
            <div className="jumbotron jumbotron-fluid py-4 "></div>
            <div className="container text">
                <h1 className="display-4"> Order Register</h1>
            </div>
            <div className="col-md-4 offset-3">
                <Upload
                    addOrEdit = {addOrEdit}
                    myphmcy = {myphmcy}
                />
                </div> 
                <div className="col-md-1">
                    <div> </div>
                </div>
            
        </div>
    )
}

import-Upload froimportm./Upload'
从“axios”导入axios；
从“react router dom”导入{Link，withRouter}；
从“react router”导入{useLocation}；
导出默认函数Uploadlist（）{
让phmcy=（新的URLSearchParams（window.location.search））.get（“phmcy”）
var myphmcy=JSON.stringify（phmcy）；
//const phmcyvalue=新的URLSearchParams（this.props.location.search）；
//const phmcy=phmcyvalue.get（'phmcy'）
console.log（myphmcy）；
常量ordersAPI=（url=）https://localhost:44357/api/Orders') => {
返回{
fetchAll:（）=>axios.get（url），
create:newRecord=>axios.post（url，newRecord），
update：（id，updateRecord）=>axios.put（url+id，updateRecord），
delete:id=>axios.delete（url+id）
}
}
const addOrEdit=（formData，onSuccess）=>{
ordersAPI（）.create（formData）
。然后（res=>{
onSuccess（）；
})
.catch（err=>console.log（err.response.data））
}
返回(
订单登记簿
)
}

子组件：（这是表单所在的位置。我只包含了一部分）

import React，{useState，useffect}来自“React”；
从“/Uploadlist”导入myphmcy；
//const myphmcy=JSON.stringify（phmcy）；
console.log（myphmcy）；
const defaultImageSrc='/images/7.jpg'；
常量初始字段值={
医嘱ID:0，
日期时间：“”，
状态：“”，
状态2:“”，
pharmacyName:“”，
客户名称：''，
患者姓名：''，
耐心地说：，
地址：''，
电子邮件：“”，
电话号码：''，
客户ID:1，
pharmacyId:myphmcy，//从URL获取的数据在发布时必须作为pharmacyId发布。
图像名称：“”，
imageSrc:“”，
图像文件：空
}
导出默认功能上传（道具）{
常量{addOrEdit}=props
常量{myphmcy}=props
const[values，setValues]=useState（initialFieldValues）
const[errors，setErrors]=useState（{}）
常量handleInputChange=e=>{
常量{name，value}=e.target；
设定值({
价值观
[名称]：值
})
}
const showPreview=e=>{
if（e.target.files&&e.target.files[0]）{
设imageFile=e.target.files[0]；
const reader=new FileReader（）；
reader.onload=x=>{
设定值({
价值观
图像文件，
imageSrc:x.target.result
})
}
reader.readAsDataURL（图像文件）
}
否则{
设定值({
价值观
imageFile:null，
imageSrc:'
})
}
}
常量验证=（）=>{
设temp={}
temp.customerName=values.customerName==“”？false:true；
设置错误（临时）
返回Object.values（temp.every）（x=>x==true）
}
常量重置形式=（）=>{
setValues（initialFieldValues）
document.getElementById（'image-uploader'）。值=null；
}
常量handleFormSubmit=e=>{
e、 预防默认值（）
if（validate（））{
const formData=new formData（）
formData.append（'orderId'，values.orderId）
formData.append（'dateTime'，values.dateTime）
formData.append（'status'，values.status）
formData.append（'status2'，values.status2）
formData.append（'pharmacyName'，values.pharmacyName）
formData.append（'customerName'，values.customerName）
formData.append（'patientName'，values.patientName）
formData.append（'patientAge'，values.patientAge）
formData.append（'address'，values.address）
formData.append（'email'，values.email）
formData.append（'teleNo'，values.teleNo）
formData.append（'customerId'，values.customerId）
formData.append（'pharmacyId'，values.pharmacyId）
formData.append（'imageName'，values.imageName）
formData.append（'imageFile'，values.imageFile）
addOrEdit（formData，resetForm）
警报（“正在上载您的文件！”）
}
}
const applyErrorClass=field=>（（错误中的字段和错误[field]==false）？“无效字段”：“”
返回(

在这里下单
提交
)
}

这不太好用，我也没办法

import React, {useState, useEffect} from 'react';


import  myphmcy from './Uploadlist';

//const myphmcy = JSON.stringify(phmcy);
console.log(myphmcy);
const defaultImageSrc = '/images/7.jpg';


const initialFieldValues ={
    orderId:0, 
    dateTime:'',
    status:'',
    status2:'',
    pharmacyName:'',
    customerName:'',
    patientName:'',
    patientAge:'',
    address:'',
    email:'',
    teleNo:'',
    customerId:1,
    pharmacyId:myphmcy,//data obtaind from the URL have to posted as the pharmacyID when posting. 
    imageName:'',
    imageSrc:'',
    imageFile: null
    
}


export default function Upload(props) {

    const {addOrEdit} = props

    const {myphmcy} = props

    const [values, setValues] = useState(initialFieldValues)
    const[errors, setErrors] = useState({})

    const handleInputChange= e => {
        const {name, value} = e.target;
        setValues({
            ...values,
            [name]:value
        })
        
    }

    const showPreview = e => {
        if(e.target.files && e.target.files[0]){
            let imageFile = e.target.files[0];
            const reader = new FileReader();
            reader.onload = x => {
                setValues({
                    ...values,
                    imageFile,
                    imageSrc : x.target.result
                    
                })
                
            }
            reader.readAsDataURL(imageFile)
        }

        else{
            setValues({
                ...values,
                imageFile:null,
                imageSrc:''
            })
        }

    }

    const validate = () => {
        let temp = {}
        temp.customerName = values.customerName == "" ? false : true;
        setErrors(temp)
        return Object.values(temp).every(x => x == true)
    }

    const resetForm = () => {
        setValues(initialFieldValues)
        document.getElementById('image-uploader').value = null;
    }

    const handleFormSubmit = e => {
        e.preventDefault()
        if (validate()){
        
        const formData = new FormData()
        
        formData.append('orderId',values.orderId)
        formData.append('dateTime',values.dateTime)
        formData.append('status',values.status)
        formData.append('status2',values.status2)
        formData.append('pharmacyName',values.pharmacyName)
        formData.append('customerName',values.customerName)
        formData.append('patientName',values.patientName)
        formData.append('patientAge',values.patientAge)
        formData.append('address',values.address)
        formData.append('email',values.email)
        formData.append('teleNo',values.teleNo)
        formData.append('customerId',values.customerId)
        formData.append('pharmacyId',values.pharmacyId)
        formData.append('imageName',values.imageName)
        formData.append('imageFile',values.imageFile)
        addOrEdit(formData, resetForm) 

        alert("Your file is being uploaded!")
    }
}

const applyErrorClass = field => ((field in errors && errors[field] == false) ? ' invalid-field' : '')


    

    return (
        <>
        <div className="container text-center ">
            <p className="lead"></p>
        </div>
        <form autoComplete="off" noValidate onSubmit={handleFormSubmit}>
            <div className="card">
                <div className="card-header text-center">Place Your Order Here</div>
            
            <img src={values.imageSrc} className="card-img-top"/>

                <div className="card-body">

                    <div className="form-group">
                        <input type="file" accept="image/*" className="form-control-file" onChange={showPreview} id="image-uploader"/> 
                    </div>
                    <div className="form-group">
                        <input type="datetime-local" className="form-control" placeholder="Date Time" name="dateTime" value={values.dateTime}
                       onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Enter the prescription items and qty" name="status" value={values.status} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="What are the symptoms?" name="status2" value={values.status2} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Pharmacy Name" name="pharmacyName" value={values.pharmacyName} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className={"form-control" + applyErrorClass('customerName')}  placeholder="Your Name" name="customerName" value={values.customerName} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Patient Name" name="patientName" value={values.patientName} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Patient Age" name="patientAge" value={values.patientAge} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Delivery address" name="address" value={values.address} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Your Email" name="email" value={values.email} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group">
                        <input className="form-control" placeholder="Contact Number" name="teleNo" value={values.teleNo} onChange={ handleInputChange}/>
                    </div>

                    <div className="form-group text-center">
                        <button type="submit" className="btn btn-light">submit</button>
                        
                    </div>
                    

                </div>
            </div>
        </form>
    </>
    )
}

const handleFormSubmit = e => {
    e.preventDefault();
    if (validate()) {
    
    const formData = new FormData();
    
    formData.append('orderId', values.orderId);
    formData.append('dateTime', values.dateTime);
    formData.append('status', values.status);
    formData.append('status2', values.status2);
    formData.append('pharmacyName', values.pharmacyName);
    formData.append('customerName', values.customerName);
    formData.append('patientName', values.patientName);
    formData.append('patientAge', values.patientAge);
    formData.append('address', values.address);
    formData.append('email', values.email);
    formData.append('teleNo', values.teleNo);
    formData.append('customerId', values.customerId);
    formData.append('pharmacyId', myphmcy) // <-- use the prop directly
    formData.append('imageName', values.imageName);
    formData.append('imageFile', values.imageFile);
    addOrEdit(formData, resetForm) ;

    alert("Your file is being uploaded!");
};