javascript - 捕获 401 并在同一组件上呈现消息

Question

更新:

我有一个获取包装器来获取我的后端 api:

  export default function MainComponentWrapper({ url, children }) {

  const classes = useStyles()
  const [fetchError, setFetchError] = React.useState()
  const [data, setData] = React.useState()

  React.useEffect(() => {
    fetch(url, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + window.localStorage.getItem("access_token"),
      },
    })
      .then(resp => {
         return resp.json()
      })
      .then(fetchedData => {
        setData(fetchedData)
      })
      .catch(error => {
        console.log(error)
        setFetchError(error)
//          window.localStorage.removeItem("access_token")
//          window.location.replace("/")
      });
      if (fetchError) {
        return <div>Some error happened, show reload button</div>
}
  }, [url])
  if (data === undefined) {
    return (
      <div className={classes.root}>
        <CircularProgress
         type="TailSpin" color="primary" size={25}
             />
      </div>
    )
  }
  return (
    <div className={classes.root}>
      {React.cloneElement(children, { data: data })}
    </div>
  )
}

我想做的是，当响应中出现 401 错误时，我想在同一组件中呈现错误消息和返回主页的按钮。

到目前为止，我唯一能做的就是在 if 语句中导航到另一个页面，但无法在同一页面中渲染某些内容。

我的组件:

export default function Audit({ data }) {

  const classes = useStyles()

    return (

    <div className={classes.root}>
      <h1>Audit logs</h1>
      <Table className={classes.table} size="small">
        <TableHead>
          <TableRow>
            <TableCell>Date</TableCell>
            <TableCell align="left">action</TableCell>
            <TableCell align="left">user</TableCell>
            <TableCell align="left">detail</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data && data.map(row => (
            <TableRow key={row.date}>
              <TableCell component="th" scope="row">
                {row.date}
              </TableCell>
              <TableCell align="left">{row.action_type}</TableCell>
              <TableCell align="left">{row.user}</TableCell>
              <TableCell align="left">{row.action_parameters}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}

更新:

我可以实现的是检查数据内部的内容，如果我返回的消息在其中，我返回一个这样的 div:

 if (data === "No Permission")
        {
          return <ErrorHandler/>
        }

但这不是最佳的，也不是我想要的，我想获取状态代码 401 并用它来做一个 if

Answer 1

编辑: 401 未被捕获为错误，您需要手动检查。

在错误处理部分使用setState:

const [fetchError, setFetchError] = useState();

fetch(....)
.then(resp => {
  resp.status === 401 ? setFetchError(resp.status) : return resp.json();
})
.then(fetchedData => {
  setData(fetchedData)
})
.catch(error => {
  console.log(error);
  setFetchError(error);
});

if (fetchError) {
  return <div>Some error happened, show reload button</div>
}

这只是一个简单的示例，更仔细地处理状态逻辑可能会更好。

作为旁注，我认为您不需要克隆元素，而是通过回调函数将 data 传递给顶部组件，并让它单独传递给子组件，或者使用 React 的上下文。