Redux-form: update syncErrors cause form to skip modifications

问题

I have a checkbox in my redux-form and upon pressing the checkbox, it shows for a millisecond as if it unchecked it but then returned to previous checked state and only clicking checkbox the second time actually unchecks it. I looked into redux-dev-tools and it shows that after form CHANGE event, UPDATE_SYNC_ERRORS one follows. Here is some code that I have:

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>
  )
})

Why this might be happening? Where could I look to try to debug it?

来源：https://stackoverflow.com/questions/63732128/redux-form-update-syncerrors-cause-form-to-skip-modifications

标签

redux

react-hooks

redux-form