Redux表单：更新syncErrors导致表单跳过修改

问题描述

我的redux-form中有一个复选框，当按下该复选框时，它会显示一毫秒，就好像它未选中一样，然后又返回到先前的选中状态，并且仅在第二次单击复选框时才真正取消选中它。我调查了redux-dev-tools，它显示出CHANGE表单事件之后，接着出现UPDATE_SYNC_ERRORS。这是我的一些代码：

const ProjectFamiliesFilterInput = React.memo(({ familyOptions,analysisGroupOptions,projectAnalysisGroupsByGuid,value,onChange,...props }) => {
  const [ allFamiliesSelected,updateallFamiliesSelected ] = useState(value.familyGuids.length === 0)
           
  const firstUpdate = useRef(true)
  useLayoutEffect(() => {
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }      
    console.log(value)
    updateallFamiliesSelected(!value.familyGuids || value.familyGuids.length === familyOptions.length)
  })       
           
  const selectedFamilies = allFamiliesSelected ? [] : value.familyGuids
           
  const onFamiliesChange = familyGuids => onChange({ ...value,familyGuids })
           
  const selectedAnalysisGroups = allFamiliesSelected ? [] :
    getSelectedAnalysisGroups(projectAnalysisGroupsByGuid,value.familyGuids).map(group => group.analysisGroupGuid)

  const selectAnalysisGroup = (analysisGroups) => {
    if (analysisGroups.length > selectedAnalysisGroups.length) {
      const newGroupGuid = analysisGroups.find(analysisGroupGuid => !selectedAnalysisGroups.includes(analysisGroupGuid))
      onFamiliesChange([...new Set([...value.familyGuids,...projectAnalysisGroupsByGuid[newGroupGuid].familyGuids])])
    } else if (analysisGroups.length < selectedAnalysisGroups.length) {
      const removedGroupGuid = selectedAnalysisGroups.find(analysisGroupGuid => !analysisGroups.includes(analysisGroupGuid))
      onFamiliesChange(value.familyGuids.filter(familyGuid => !projectAnalysisGroupsByGuid[removedGroupGuid].familyGuids.includes(familyGuid)))
    }
  }

  const selectAllFamilies = (checked) => {
    if (checked) {
      onFamiliesChange(familyOptions.map((opt => opt.value)))
    } else {
      onFamiliesChange([])
    }
  }

  return (
    <Form.Group inline widths="equal">
      <BooleanCheckBox
        {...props}
        value={allFamiliesSelected}
        onChange={selectAllFamilies}
        width={5}
        label="Include All Families"
      />
    </Form.Group>
  )
})

为什么会发生这种情况？我在哪里可以尝试进行调试？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）