我正在使用react with Axios。我正在react中上传一个文件，我想在文件上传后在另一个输入中设置url，但我无法获得值。在控制台中，我得到了正确的值，但在输入字段中出现了问题。目前我正在做不同的方法。 我想要id=“uploadrhp”中的上传文件url。如果有人知道，请帮忙。

import React, { Component } from 'react';
import axios from "axios";

class TradeImportComponent extends React.Component<{},any>{

    // API Endpoints
    custom_file_upload_url = `https://exaample.com/api/ipo/document/upload`;
  canvas: any;

    // state
    constructor(props) {
        super(props);
        this.canvas = React.createRef()
        this.state = {
            image_file: null,
            image_preview: '',
            
        }
    }

    // Image Preview Handler
    handleImagePreview = (e) => {
        let image_as_base64 = URL.createObjectURL(e.target.files[0])
        let image_as_files = e.target.files[0];

        this.setState({
            image_preview: image_as_base64,
            image_file: image_as_files,
        })
    }

    // Image/File Submit Handler
    handleSubmitFile = () => {

        if (this.state.image_file !== null){

            let formData = new FormData();
            formData.append('ipoName', 'tata');
            formData.append('document', this.state.image_file);

            axios.post(
                this.custom_file_upload_url,
                formData,
                {
                    headers: {
                        // "Authorization": "YOUR_API_AUTHORIZATION_KEY_SHOULD_GOES_HERE_IF_HAVE",
                        "Content-type": "multipart/form-data",
                    },                    
                }
            )
            .then(res => {
                console.log(`Success` + res.data.response);
                var json= JSON.parse(JSON.stringify(res.data.response));
                console.log(json);
                console.log(json.url);
                console.log(this.canvas.current.value);
                this.canvas.current.value=json.url;
                console.log(this.canvas.current.value);
            })
            .catch(err => {
                console.log(err);
            })
        }
    }


    // render from here
    render() { 
        return (
            <div>
                {/* image preview */}
                <img src={this.state.image_preview} alt="image_preview" width="100%"/>
                {this.state.url}
                {/* image input field */}
                <input
                    type="file"
                    onChange={this.handleImagePreview}
                    
                />
                <input type="hidden" name="logo" id="uploadlogo"/>
                <input type="hidden" name="rhp" value="test@1234567" ref={this.canvas} id="uploadRhp"/>
                <input type="hidden" name="financial_Pdf" id="uploadfinancial"/>

                <label>Upload file</label>
                <input type="submit" onClick={this.handleSubmitFile} value="Submit"/>

                <ul>
      </ul>


            </div>
        );
    }
}

export default TradeImportComponent;

顺晟科技：

在axios响应中使用setstate将响应存储在State中

import React, { Component } from 'react';
import axios from "axios";

class TradeImportComponent extends React.Component<{},any>{

    // API Endpoints
    custom_file_upload_url = `https://exaample.com/api/ipo/document/upload`;
  canvas: any;

    // state
    constructor(props) {
        super(props);
        this.canvas = React.createRef()
        this.state = {
            image_file: null,
            image_preview: '',
            
        }
    }

    // Image Preview Handler
    handleImagePreview = (e) => {
        let image_as_base64 = URL.createObjectURL(e.target.files[0])
        let image_as_files = e.target.files[0];

        this.setState({
            image_preview: image_as_base64,
            image_file: image_as_files,
        })
    }

    // Image/File Submit Handler
    handleSubmitFile = () => {

        if (this.state.image_file !== null){

            let formData = new FormData();
            formData.append('ipoName', 'tata');
            formData.append('document', this.state.image_file);

            axios.post(
                this.custom_file_upload_url,
                formData,
                {
                    headers: {
                        // "Authorization": "YOUR_API_AUTHORIZATION_KEY_SHOULD_GOES_HERE_IF_HAVE",
                        "Content-type": "multipart/form-data",
                    },                    
                }
            )
            .then(res => {
                console.log(`Success` + res.data.response);
                var json= JSON.parse(JSON.stringify(res.data.response));
                console.log(json);
                console.log(json.url);
                console.log(this.canvas.current.value);
                this.canvas.current.value=json.url;
                console.log(this.canvas.current.value);
            })
            .catch(err => {
                console.log(err);
            })
        }
    }


    // render from here
    render() { 
        return (
            <div>
                {/* image preview */}
                <img src={this.state.image_preview} alt="image_preview" width="100%"/>
                {this.state.url}
                {/* image input field */}
                <input
                    type="file"
                    onChange={this.handleImagePreview}
                    
                />
                <input type="hidden" name="logo" id="uploadlogo"/>
                <input type="hidden" name="rhp" value="test@1234567" ref={this.canvas} id="uploadRhp"/>
                <input type="hidden" name="financial_Pdf" id="uploadfinancial"/>

                <label>Upload file</label>
                <input type="submit" onClick={this.handleSubmitFile} value="Submit"/>

                <ul>
      </ul>


            </div>
        );
    }
}

export default TradeImportComponent;