Ранний возврат из реакции useEffect пользовательский хук не становится деструктивным

Question

У меня есть реагирующий пользовательский хук, который использует useEffect. Этот хук должен извлекать данные из api , используя JS fetch. Теперь я хочу вернуть api или данные об ошибках в зависимости от ситуации, а затем деструктурировать значение в компоненте, где вызывается этот хук. Ниже приведен код моего пользовательского хука

export const useGetData = (url, body) => {
const [state, setState] = useState([]);
const [errorMsg, setErrorMsg] = useState({});
useEffect(() => {
    fetch(url, {
      method: 'Post',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(body)
    }).then(response => response.json())
    setState({response});
  ).catch(error =>
    console.error('Error:', error);
    setErrorMsg(error);
    return errorMsg;
  );
}
}, [url, body]);
return state;
}

, и вот как он был вызван из компонента реакции

  let data = { state: '', errorMsg: '' };
  data = useGetData('url', 'body');

Теперь, когда вызов API успешен, я могу получить правильные данные в data, но не может получить данные об ошибках в случае сбоя. Мой пользовательский хук рано возвращается в случае ошибки, но он не способен разрушить компонент реагирования, откуда он вызывается. Что здесь не так?

Answer 1

Я полагаю, что причина, по которой вы не видите данные об ошибках, заключается в том, что вы не возвращаете errorMsg с вашего useGetData хука.

Попробуйте:

    export const useGetData = (url, body) => {
    const [data, setData] = useState([]);
    const [errorMsg, setErrorMsg] = useState({});
    useEffect(() => {
        fetch(url, {
          method: 'Post',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(body)
        }).then(response => {
         let data = response.json())
         setData(data);
        }  
      ).catch(error => {
        console.error('Error:', error);
        setErrorMsg(error);
      });
    }
    }, [url, body]);
    return {data, errorMsg};
    }

и в вашем компоненте получите доступ к таким данным:

  const {data, errorMsg} = useGetData('url', 'body');

Надеюсь, это поможет