代码之家 › 专栏 › 技术社区 › torrey pines

React在错误的API调用中不输出axios catch错误,而是获取JavaScript错误

axios reactjs javascript

torrey pines · 技术社区 · 2 年前

当我对我的API发出错误的请求,不应该返回任何内容时,它会使我的应用程序崩溃,但不会在控制台上运行。记录我为axios设置的任何错误消息,相反,我在我的一个组件中使用了一系列关于地图的错误。我似乎找不到错误的原因。

带有地图的组件:

const Viewer=({poem})=>{
    return(
        <>
        {
            poem.map((item) => {
                let author = item.author
                let title = item.title
                let lines = item.lines
                if (author!= undefined && title!= undefined) {
                    return(
                        <>
                        <div className="viewer">
                            <div className="author">{author}</div>
                            <div className="title">{title}</div>
                            <div className="lines">
                                {lines.map((line) =>
                                    <div>{line}</div>
                                )}
                            </div>
                        </div> 
                        </>
                    )
                }
            })
        }
        </>
    )
}

之后,我的页面变为空白,直到我重新加载它,我收到3条错误消息,上面写着这首诗。地图不是一个函数。

下面是我获取API的方式:

const searchPoem= (event) => {
    if(event.key==="Enter")
    {
      axios.get("https://poetrydb.org/"+option+"/"+search+"/all")
      .then(res=>setPoemData(res.data))
      .catch((err) => {
        if (err.response) {
          console.log(err.response.data)
          console.log(err.response.status)
          console.log(err.response.headers)
        } else if (err.request) {
          console.log(err.request)
        } else {
          console.log('Error', err.message)
        }
      })
    }
  }

结果被放入一个div中,该div使用我的查看器组件生成一张卡

2 回复 | 直到 2 年前

icelam 2 年前

什么时候 .map() 在非数组变量上调用,它将抛出错误。

由于页面在错误的API调用后会断开,因此防止它的一种方法是检查 poem 数组是否使用 Array.isArray() 演出前 poem.map() .

const Viewer = ({ poem }) => {
  return (
    <>
      {Array.isArray(poem) // Add extra type checking before rendering
        ? (
          poem.map((item) => {
            let author = item.author;
            let title = item.title;
            let lines = item.lines;
            if (author != undefined && title != undefined) {
              return (
                <>
                  <div className="viewer">
                    <div className="author">{author}</div>
                    <div className="title">{title}</div>
                    <div className="lines">
                      {lines.map((line) => (
                        <div>{line}</div>
                      ))}
                    </div>
                  </div>
                </>
              );
            }
          })
        )
        : null // or a error message component
      }
    </>
  );
};

MattK 2 年前

尝试在组件中记录变量poem。

如果API未返回任何内容,则变量poem在此上下文中不存在,因此poem也不存在。地图

了解条件渲染- https://reactjs.org/docs/conditional-rendering.html

您可以在渲染函数中使用类似于下面的内容来处理此问题。

poem && Viewer(poem)