React使用axios上传文件后如何将返回URL赋值到指定输入框

• 你给id为uploadRhp的隐藏输入框硬编码了固定value="test@1234567"属性，又没有将value绑定到state、配套onChange事件处理，此时该输入框属于只读的受控组件，直接通过ref修改DOM的value会被React渲染逻辑覆盖，所以无法生效。
• var json= JSON.parse(JSON.stringify(res.data.response));属于冗余代码，axios返回的响应数据已经自动解析为JS对象，不需要重复做序列化和反序列化操作。

方案1：使用受控组件实现（推荐，符合React开发规范） #

将输入框的value绑定到state，上传成功后通过setState更新值即可，无需操作ref：

// 1. 修改state初始化
constructor(props) {
    super(props);
    this.state = {
        image_file: null,
        image_preview: '',
        rhpUrl: 'test@1234567' // 新增字段存rhp输入框的值
    }
}

// 2. 上传成功后更新state
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: {"Content-type": "multipart/form-data"} }
        )
        .then(res => {
            const url = res.data.response.url;
            this.setState({ rhpUrl: url }); // 直接更新state即可
        })
        .catch(err => console.log(err))
    }
}

// 3. 修改输入框绑定value
render() {
    return (
        {/* 其他代码不变 */}
        <input 
            type="hidden" 
            name="rhp" 
            value={this.state.rhpUrl} 
            id="uploadRhp"
        />
        {/* 其他代码不变 */}
    )
}

方案2：使用非受控组件实现 #

删除输入框硬编码的value属性，改用defaultValue设置初始值，后续直接通过ref修改DOM值即可生效：

// 1. 修改输入框配置，删除value、改用defaultValue
<input 
    type="hidden" 
    name="rhp" 
    defaultValue="test@1234567" 
    ref={this.canvas} 
    id="uploadRhp"
/>

// 2. 原来的ref赋值逻辑无需修改，上传成功后直接赋值即可生效
this.canvas.current.value = res.data.response.url;

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