明道云AI自定义字段编码,存储字段

function CustomField({ value, currentControl, formData, onChange }) {
const [displayValue, setDisplayValue] = useState(value); // 使用状态来存储显示值
useEffect(() => {
const repeatSetting = formData["67d79adc34100a28bd58571c"]?.value; // 获取重复设置字段的值
const endTime = formData["67bbcd8099279afdd534dc3e"]?.value; // 获取结束时间字段的值
let newDisplayValue = ""; // 默认显示值为空
console.log('repeatSetting',repeatSetting)
if (repeatSetting === '["f2b4bfd2-2036-46e2-bb00-ef9256ab66b8"]') {
newDisplayValue ="每日重复提醒";
} else if (repeatSetting === '["6583540b-235a-42d2-9647-9df6bb4de04d"]') {
if (endTime) {
const endDate = new Date(endTime);
const weekDays = ["日", "一", "二", "三", "四", "五", "六"]; // 星期几的数组
const dayOfWeek = weekDays[endDate.getDay()]; // 获取星期几
newDisplayValue = `每周${dayOfWeek}提醒`; // 格式化为“每周几”
}
} else if (repeatSetting === '["004f1016-1282-4620-8f3b-e2574b26165a"]') {
if (endTime) {
const endDate = new Date(endTime);
const dayOfMonth = endDate.getDate(); // 获取几号
newDisplayValue = `每月${dayOfMonth}号提醒`;
}
} else if (repeatSetting === '["3c3a6882-5522-4f3c-8b44-67dccbcf1fc2"]') {
if (endTime) {
const endDate = new Date(endTime);
const month = String(endDate.getMonth() + 1).padStart(2, '0'); // 获取月份并确保是两位数
const day = String(endDate.getDate()).padStart(2, '0'); // 获取几号并确保是两位数
newDisplayValue = `每年${month}-${day}提醒`;
}
} else {
newDisplayValue = "不重复提醒";
}
if (newDisplayValue!== displayValue) {
setDisplayValue(newDisplayValue); // 更新显示值
if (onChange) {
onChange(newDisplayValue); // 更新存储类型字段的值
}
}
}, [formData["67bbcd8099279afdd534dc3e"]?.value, formData["67d79adc34100a28bd58571c"]?.value]); // 依赖于重复设置和结束时间的变化
return (
<div className="text-[#333] text-[13px] h-[36px] flex items-center px-2">
{displayValue}
</div>
);
}
在 useEffect
里添加了 if (newDisplayValue!== displayValue)
条件判断,只有当 newDisplayValue
和当前的 displayValue
不同时,才会调用 setDisplayValue
和 onChange
函数,以此避免不必要的更新。
通过这种方式,就能避免因 onChange
不断触发而导致的无限循环问题。
欢迎留下你的看法
共 0 条评论