手机网站模版更换技巧,wordpress企业模板免费,新开传奇网站排行,天天想你视频免费观看西瓜背景
react祖父组件设置异步数据#xff08;setFieldsValue#xff09;后传递form给子组件#xff0c;再逐层传递给孙子组件引起的未渲染异常#xff0c;孙子组件如果不设置useEffect和useState去监听value的值进行重渲染#xff0c;会出现获取得到value最新值#xff0…背景
react祖父组件设置异步数据setFieldsValue后传递form给子组件再逐层传递给孙子组件引起的未渲染异常孙子组件如果不设置useEffect和useState去监听value的值进行重渲染会出现获取得到value最新值但是不进行渲染的异常
解决前后的代码对比
完整代码异常
const GetText (props) {const { value, config, containerId, getFieldValue } props;const [itemValue, setItemValue] useState(value);const { formId } config;const getFormId useCallback((suffix _param_countryPhoneCode) {if (Array.isArray(formId)) {return [containerId, formId[0], ${formId[1]}${suffix}];}return ${formId}${suffix};},[formId, containerId],);useEffect(() {const pObj getFieldValue(getFormId()) || {};if (!value.includes()) {const _itemValue ${pObj.countryPhoneCode ? : }${pObj.countryPhoneCode} ${value};setItemValue(_itemValue);}}, [getFieldValue, getFormId, value, getFieldValue(getFormId())]);return itemValue ? (div style{{ fontSize: 12 }}{itemValue}/div/) : null;
};完整代码正常
const GetText (props) {const { value, config, containerId, getFieldValue } props;const [itemValue, setItemValue] useState();const { formId } config;const getFormId useCallback((suffix _param_countryPhoneCode) {if (Array.isArray(formId)) {return [containerId, formId[0], ${formId[1]}${suffix}];}return ${formId}${suffix};},[formId, containerId],);// 注意由于在changeRecordModal中有对变更记录表单项做了顺序标记// 因此formId会多一个序号在变更记录弹窗里首次加载可能因为更新是异步的导致value没有正常渲染// 所以这边必须借用useEffect和useState控制value的更新渲染useEffect(() {const pObj getFieldValue(getFormId()) || {};if (!value.includes()) {const _itemValue ${pObj.countryPhoneCode ? : }${pObj.countryPhoneCode} ${value};setItemValue(_itemValue);}}, [getFieldValue, getFormId, itemValue, value]);return itemValue ? (div style{{ fontSize: 12 }}{itemValue}/div/) : null;
};
