Как обработать ошибку, используя try catch, используя React State с функциями Arrow - PullRequest
Новая
       46

Как обработать ошибку, используя try catch, используя React State с функциями Arrow

0 голосов
/ 24 сентября 2019

Я новичок в React, я пытаюсь реализовать некоторую проверку ошибок с помощью функции стрелки реакции, но мне не повезло весь день.Уловка работает, и я могу распечатать ошибки, но я не знаю, как связать ошибки, которые я печатаю, в 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] и использовать useEffect внутри errorsHandler, но получить Invalid Hook.Как я могу иметь дескриптор внутри улова, чтобы быть в том же контексте, что и форма?

Заранее спасибо

1 Ответ

1 голос
/ 24 сентября 2019

Есть несколько вещей, которые вы можете сделать здесь.Во-первых, используйте mapDispatchToProps до wrap внутри dispatch создателей вашего действия (без 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>
}
...