Amis表单提交后数据未更新,如何触发重新渲染?

公孙珮青 阅读 99

在用Amis做数据编辑页面时遇到问题,表单提交成功后数据没变化。尝试用setData更新状态了,但界面还是显示旧数据。

场景是这样的:用户编辑信息后点击提交,后端返回新数据后,我用React的setState更新了formData变量,但表单里的输入框还是老内容。控制台没报错,数据确实到组件里了。

表单配置是这样的:


{
  "type": "form",
  "api": "/api/save",
  "body": [
    { "type": "input-text", "name": "name", "label": "姓名" }
  ]
}

提交处理函数这样写的:


const handleSave = (data) => {
  fetch('/api/save', { method: 'POST', body: data })
    .then(res => res.json())
    .then(newData => setFormData(newData)); // 更新了状态但没渲染
};

折腾了好久没找到原因,Amis表单是不是需要特殊方式强制刷新?

我来解答 赞 12 收藏
二维码
手机扫码查看
2 条解答
W″怡冉
你这个情况其实不是 Amis 表单没刷新,而是你混用了两种数据流:Amis 自己管理表单数据,而你又用 React 的 setFormData 去改外部状态,两者没对上。

Amis 的 form 组件默认是受控的,但如果你没显式传 data 属性,它会自己维护内部状态。你提交成功后只更新了外部的 formData,但 Amis 根本没用它,所以当然不更新。

正确做法是:要么用 Amis 自带的提交后自动刷新能力,要么手动控制 data 属性。

第一种最省事——你已经在配置里写了 api,那直接加个 reload 就行:

{
"type": "form",
"api": "/api/save",
"body": [
{ "type": "input-text", "name": "name", "label": "姓名" }
],
"reload": "xxx" // 提交成功后触发某个动作,比如刷新当前页数据
}

但更推荐的写法是显式把 data 绑到外部状态上,这样你改了 data 就真能生效:

const [formData, setFormData] = useState({ name: '默认值' });

const formSchema = {
"type": "form",
"data": formData, // 关键!显式绑定
"api": "/api/save",
"body": [
{ "type": "input-text", "name": "name", "label": "姓名" }
]
};

handleSave = (data) => {
fetch('/api/save', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
})
.then(res => res.json())
.then(newData => {
setFormData(newData); // 这次 Amis 就能跟着更新了
});
};

另外注意一点:如果你是用 amis.embeduseAmisSchema 这种方式动态注入 schema,确保每次 formData 变化时 schema 也重新生成(因为 data 是 schema 的静态属性)。

如果嫌每次重生成 schema 性能不好,可以考虑用 amis.EventBusamis.registerAction 做更精细的控制——不过多数情况,上面这种绑定 data 的写法已经够用了。
点赞 3
2026-02-26 08:12
Des.海霞
Amis 表单提交后不会自动重新渲染,因为它的数据源是独立的。你可以试试在更新状态后,手动调用 form.updateData 方法刷新表单数据。

修改你的提交函数:
const handleSave = (data) => {
fetch('/api/save', { method: 'POST', body: JSON.stringify(data) })
.then(res => res.json())
.then(newData => {
setFormData(newData);
form.updateData(newData); // 强制刷新表单
});
};

应该能用,不行再看看别的依赖有没有问题。
点赞 20
2026-01-30 23:13