React自定义Hook中obj.token判断失效导致返回failed问题求助

AI 小北

2026-8-13

问题分析与解决方案

核心问题

你代码里的关键bug是重复读取了Response对象的响应体：

第一次const obj = await response.json()已经把响应体的可读流消费完毕，Response对象的body只能被读取一次。
当你在条件判断通过后再次调用await response.json()时，此时响应体已经是空的，这个调用会返回空对象甚至直接抛出错误，导致代码进入catch块，触发setFetchState('failed')。
你看到的console.log('obj token', obj.token !== undefined)确实为true，但这行代码之后的重复读取响应体操作才是导致状态变为failed的元凶，和obj.token的判断本身无关。

修正代码

直接使用已经解析好的obj，不要再重复调用response.json()：

const useMyHook = (url: string) => {
  const [fetchState, setFetchState] = useState('pending');

  useEffect(() => {
    const fetchResponse = async () => {
      try {
        setFetchState('loading');
        const response = await fetch(url);
        const obj = await response.json();
        console.log('obj token', obj.token !== undefined);

        const isValidHeader = response.headers
          .get('Content-Type')
          ?.includes('application/json');

        if (response.ok && isValidHeader && obj.token !== undefined) {
          console.log(obj); // 直接使用已解析完成的obj
          setFetchState('success'); // 修正拼写错误：succes → success
        } else {
          // 条件不满足时显式设置失败状态，避免停留在loading
          setFetchState('failed');
        }

      } catch (error) {
        setFetchState('failed');
        console.error(error);
      }
    };

    fetchResponse();
  }, [url]); // 依赖数组添加url，确保url变化时重新发起请求

  return fetchState;
};

export default useMyHook;