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

更新：

我有一个获取包装器来获取我的后端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>
  )
}

导出默认函数MainComponentWrapper（{url，children}）{
常量类=useStyles（）
const[fetchError，setFetchError]=React.useState（）
const[data，setData]=React.useState（）
React.useffect（（）=>{
获取（url{
方法：“获取”，
标题：{
“内容类型”：“应用程序/json”，
授权：“载体”+window.localStorage.getItem（“访问令牌”），
},
})
。然后（resp=>{
return resp.json（）
})
。然后（fetchedData=>{
设置数据（获取数据）
})
.catch（错误=>{
console.log（错误）
setFetchError（错误）
//window.localStorage.removietem（“访问令牌”）
//window.location.replace（“/”）
});
如果（获取错误）{
返回发生的错误，显示重新加载按钮
}
}，[url]）
如果（数据===未定义）{
返回(
)
}
返回(
{React.cloneElement（子项，{data:data}）}
)
}

我想做的是，当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>
  )
}

导出默认函数审核（{data}）{
常量类=useStyles（）
返回(
审计日志
日期
行动
用户
细节
{data&&data.map（行=>(
{row.date}
{row.action_type}
{row.user}
{row.action_parameters}
))}
)
}

更新：

我能做到的是检查内部数据，如果我返回的消息在其中，我会返回一个div，如下所示：

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

if（数据==“无权限”）
{
返回
}

---

但这不是最优的，也不是我想要的，我想要得到状态代码401，并用它做一个if编辑：

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>
}

const[fetchError，setFetchError]=useState（）；
获取（…）
。然后（resp=>{
resp.status==401？setFetchError（resp.status）：返回resp.json（）；
})
。然后（fetchedData=>{
设置数据（获取数据）
})
.catch（错误=>{
console.log（错误）；
setFetchError（错误）；
});
如果（获取错误）{
返回发生的错误，显示重新加载按钮
}

这只是一个简单的示例，最好更仔细地处理

状态

逻辑

---

作为旁注，我认为您不需要克隆元素，而是通过回调函数将

数据

传递给顶部组件，并让它单独传递给子组件，或者使用React的

上下文

您只需使用另一个

useState

进行错误处理，

if（fetchError）

，这是正确的，但是不要把它放在你的

useffect

中。我试着把它放在另一个之前，在数据===未定义之前，结果是一样的。我试着使用你的代码，得到了同样的错误401。我不太擅长反应，我用我使用您的示例所做的更改更新了问题。这是因为

数据

是

未定义的

（或null），并且您的

{children}

正在尝试访问。您需要在代码中未显示的组件上执行

data&&data.map（..=>..）

。我再次更新，在响应中出现一条json消息说“no permission”，因此数据不是空的。我想您正在尝试执行

data.map（）

操作，其中数据不是数组，即使它不是空的。在这种情况下，它也不是数组，只是一个字符串，但我不想映射如果我得到错误，我只想呈现一条消息。如果没有错误，那么我想映射，但是已经实现了，现在我正试图实现错误捕获。