ReactJS文件上传后fetch返回值未同步显示在textarea的问题咨询

云上老周

2026-9-26

问题根因

你遇到的问题本质是data变量更新后没有触发textarea内容同步，分两种常见开发场景给出对应解法：

场景1：使用原生JavaScript开发

原生JS不支持HTML里直接写{data}的插值语法，需要在fetch回调里主动操作DOM赋值：

修改fetch回调逻辑，删除无效的setData调用，直接给textarea赋值：

fetch('/upload', {
    method: 'POST',
    body: data
}).then(response => response.json()
).then(json => {
    // 如果返回的json是对象类型，先转成格式化字符串再赋值
    const showContent = typeof json === 'object' ? JSON.stringify(json, null, 2) : json
    document.getElementById('text').value = showContent
    console.log(json)
});

调整textarea的HTML代码，删除无效的插值内容：

<textarea id="text"></textarea>

场景2：使用React/Vue等支持插值的前端框架开发

需要检查响应式状态配置和组件绑定逻辑：

确认setData是框架提供的响应式状态更新方法（比如React useState返回的setter、Vue ref对应的赋值方法），不能是普通变量赋值
修正textarea的属性绑定：
- React场景下要绑定value属性：
```
<textarea id="text" value={data}></textarea>
```
- Vue场景下绑定v-model：
```
<textarea id="text" v-model="data"></textarea>
```
如果返回值是对象类型，调用setData前先转成字符串：setData(JSON.stringify(json, null, 2))