反应不输出Axios在不良API呼叫上遇到错误，而是会遇到JavaScript错误

Question

当我向不应该返回任何内容的API提出不良请求时，它会崩溃我的应用，但不会机。我的组件之一。我似乎找不到错误的原因。

地图的组件：

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中

Answer 1

在非阵列变量上被调用，它将引发错误。

由于该页面在不良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
      }
    </>
  );
};

Answer 2

尝试记录组件中的变量诗。

如果API什么都没返回，那么在这种情况下将不存在变量诗，因此诗歌也不会。

Have a look into conditional rendering - https://reactjs.org/docs/conditional-rendering.html

您可以在渲染功能中使用与下面类似的内容来处理此问题。

poem && Viewer(poem)