问题描述
我的页面用antd的Form写的，如下：
页面的部分样子
在渲染的时候大部分Form.Item不会被渲染出来。这在使用的时候倒是没什么问题，但是到了提交的时候，因为Form.Item没有渲染，哪怕未选中的那些项有错误的值，也因为没有触发校验而顺利提交了。
当然，下下策是最后提交的时候手动遍历数组然后自己写校验代码也可以，但是这极不灵活而且一定程度上失去了使用Form的意义——我用它不就是干这个的吗，那校验我又自己重写了，用它干嘛。
问了一下身边的人，答曰，你让他全部渲染出来不就好了。
……
在不短的沉默后，我们都笑了。
尝试
我知道多节点渲染的优化解决方案里就有虚拟滚动，就是只渲染需要展示的节点。
但是我很好奇这个页面全部渲染的情况下能有多卡。
数据如下：
节点全部渲染后，点击新增按钮的性能数据
就算不看数据，就是随便做一个操作感觉上就像一个世纪那么漫长。
所以我还是改回来了。
目前的方案，点击新增按钮的性能数据
解决
我想到一个好办法。
提交的时候覆盖上一个蒙层，弄一个loading告诉用户在校验中。
然后依次去选中，然后每次选完了就去调用form.validateFields()。
如果出错了，刚好停下来，让用户去改错误。
代码
const onFinishFailed = ({ errorFields }) => {
if (errorFields?.length) {
errorFields.forEach(
(cur) => cur?.errors[0] && message.error(cur?.errors[0]),
);
}
};
const clickEveryPlayCheckError = async (values, curIndex = 0) => { // 依次点击，依次校验，发现有错误就停下来报错
if (values?.playSteps?.length <= curIndex) return true;
console.log('submit validating...', curIndex);
editPlayRef?.current?.updateActiveItem(values?.playSteps[curIndex]); // 更换当前展示的item
await new Promise((resolve) => setTimeout(resolve, 10));
try {
await form.validateFields();
return clickEveryPlayCheckError(values, 1 + curIndex);
} catch (error) {
console.log('err', error);
onFinishFailed(error);
}
return false;
};
const onFinish = async (values) => {
console.log("submit", values); // eslint-disable-line
setSubmitValidating(true);
const validateRes = await clickEveryPlayCheckError(values);
setSubmitValidating(false);
if (!validateRes) return;
// ……
}
效果如下
提交校验效果
