ReactJS Hook错误处理无法捕获错误

问题描述

我正在尝试捕获一些API调用收到的404错误。

我正在使用矩阵API，需要从其ID获取房间名称，这是有效的。其中一些没有名称，该名称返回我尝试捕获的404错误。不幸的是，这行不通，而且我不明白我要去哪里。代码本身可以执行，但仍会在控制台中抛出404。

const JoinedRooms = () => {
  const [answer,setAnswer] = useState([]);
  const [isError,setIsError] = useState(false);

  const getAnswer = async () => {
    const res = await fetch(`https://example.com/_matrix/client/r0/joined_rooms`,{
      headers: {
        "Authorization": `Bearer ${localStorage.getItem('mx_access_token')}`
      }
    });

    const answer = await res.json();

    const getNames = await Promise.all(answer.joined_rooms.map(async (roomId) => {
      setIsError(false);
      const res = await fetch(`https://example.com/_matrix/client/r0/rooms/${roomId}/state/m.room.name`,{
        headers: {
          "Authorization": `Bearer ${localStorage.getItem('mx_access_token')}`
        }
      });
      try {
        const roomName = await res.json();
        return roomName.name;
      } catch (error) {
        setIsError(true);
      }
    }));
    setAnswer(getNames);
  }

  useEffect(() => {
    getAnswer();
  },[]);

  return answer;
}

export default JoinedRooms;

解决方法

404状态码不会throw错误，因此您的try...catch块将无法捕获它。尝试直接从返回的res对象获取404。

      const res = await fetch(`https://example.com/_matrix/client/r0/rooms/${roomId}/state/m.room.name`,{
        headers: {
          "Authorization": `Bearer ${localStorage.getItem('mx_access_token')}`
        }
      });
      if (res.status === 404) {
        // handle error
      }