微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。