如何使用带有箭头函数的 React State 使用 try catch 处理错误

Question

我是 React 新手，我正在尝试使用 react 箭头函数实现一些错误验证，但一整天都没有运气。 catch 有效，我可以打印错误，但我不知道如何将我在 errorsHandler() 中打印的错误链接到表单用于样式和警告的其他 const。

  const errorsHandler= fieldErrors => {
      if (fieldErrors) {
         fieldErrors.forEach(err => {
           const errorFieldName= err.field;
           const errorDescription = err.message;
           console.log('Field',  errorFieldName, 'Description', errorDescription);
           // Field name Description name already exists
         });
       }
   };
   export const defaultGroupModel = {
       description: '',
       active: true,
       name: '',
    }
    const GroupFormModal = ({ editId, editGroup, onSave}) => {
        const [groupState, setGroupState] = useState(defaultGroupModel);

        useEffect(() => {
           if (editGroup) {
              setGroupState(editGroup);
           }
        }, [editGroup]);

        const handleChange = ({ target: { value, name} }) => {
           setGroupState({ ...groupState, [name]: value });
        };

        return ( (...) <Form onSubmit={e => onSave(e, groupState)} onReset={onReset}> (...);
    };

    const mapDispatchToProps = dispatch => ({
      onSave: (e, group) => {
        e.preventDefault();
        if (group.id) {
          dispatch(updateGroup(group));
        } else {
          dispatch(createGroup(group)).catch(error => {
            errorsHandler(error.data.fieldErrors);
          });
        }
      },
    });

    export default connect(
      mapStateToProps,
      mapDispatchToProps,
    )(GroupFormModal);

我尝试创建一个 [errorState, setErrorState] 并在 errorsHandler 中使用 useEffect，但得到了 Invalid Hook。如何使 catch 内的句柄与表单处于相同的上下文中？

提前谢谢你

Answer 1

您可以在这里做的事情很少。首先，在dispatch 中使用mapDispatchToProps 到wrap 你的action 的创建者（没有then 和catch）

const mapDispatchToProps = dispatch =>({
     updateGroup : group => dispatch(updateGroup(group)),
     createGroup : group => dispatch(createGroup(group))
})

现在您可以设置内部state 来反映这些错误

const Component = ({ updateGroup, createGroup }) =>{
    const [errors, setErrors] = useState(false)

    const onSave = (group,e) =>{
       createGroup(group)
           .then(res => console.log('everything ok'))
           .catch(err => setError(err) /* now you have the errors inside your component*/)
    }

    return <form onSubmit={ e => onSave(group,e)) }> /*...*/ </form>
}