问题

Question

我正在从 reactjs 中的表单发送表单数据。用户的一些预先输入必须与表单一起发送。我从父文件的 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 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>
    </>
    )
}

这行不通，我无法发布数据。有天才可以帮我解决这个问题吗？

Answer 1

问题

出于某种原因，您导入 Uploadlist（默认导出/导入）并将其命名为 myphmcy，将其保存在初始状态，然后从不使用传递的 myphmcy 道具。这种模式往往会导致陈旧状态，因为您还需要在 prop 值更新时进行处理，以便同步状态值。

解决方案

在 React 中存储传递的 props 是反模式，只需在 myphmcy 提交处理程序中直接使用 handleFormSubmit prop。这确保您在提交表单数据时始终使用最新的 myphmcy props 值。

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!");
};

Answer 2

您正在从 props 获取 myphmcy 值，但将其设置在函数之外。所以它只会将 undefined 设置为 pharmacyId。您需要在函数内部分配 myphmcy 值。

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

2 个答案:

问题

解决方案