当我使用axios时，如何处理React应用程序中的错误xhr.js

Question

我试图处理这个错误。下面附上了来自App.js、unsplash.js和组件ErrorBoundery.js的代码。我无法阻止错误在console.log中以红色显示。网站本身运行良好。我已经想了一天了。我不知道怎么了。

当然，当我试图通过单词搜索与unsplash API中的任何图片标签无关的图片时，会出现错误。错误消息如下：

xhr.js:210获取https://api.unsplash.com/search/photos?per_page=21&页面=1400

App.js

import React from "react";
import { useState } from "react";
import Search from "./Search";
import unsplash from "../api/unsplash";
import PhotoList from "./PhotoList";
import Footer from "./Footer";
import Modal from "./Modal";
import { AppProvider } from "./AppContext";
import { Helmet } from "react-helmet";
import words from "./data/words.json";
import { ErrorBoundary } from "./ErrorBoundery";
export default function App() {
const [errors, setErrors] = useState([]);
const [photos, setPhotos] = useState([]);
const [numPage, setNumPage] = useState(1);
let suggestion = words[0].words;
async function handleSearchSubmit(name) {
const response = await unsplash
.get("/search/photos", {
params: { query: name, per_page: 21, page: numPage },
})
.catch((err) => {    
if (err.response) {
setErrors(err.response.data.errors);          
} else if (err.request) {
console.log(err.request);
} else {
console.log(`Error: ${err.message}`);
}
});
try {
setPhotos(response.data.results);
} catch {
console.log(
`Message: there are no images available related to this name`
);
}
}
return (
<div>
<AppProvider>
<Helmet>
<meta charSet="utf-8" />
<title>Via Images</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta
name="description"
content="Website for anyone interested in exploring the world via images."
/>
</Helmet>
<ErrorBoundary>
<Modal />
<Search
suggestions={suggestion}
onSubmit={handleSearchSubmit}
numPage={numPage}
setNumPage={setNumPage}
/>
<PhotoList errors={errors} photos={photos} />
<Footer />
</ErrorBoundary>
</AppProvider>
</div>
);
}

unsplash.js

import axios from "axios";
export default axios.create({
baseURL: "https://api.unsplash.com",
headers: {
Authorization: "Client-ID IN-THIS-PLACE-IS-MY-KEY",
},
})

ErrorBoundary.js

import React from "react";
export class ErrorBoundary extends React.Component {
state = { hasError: false, error: null };
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
console.log("Boundery: ", error, errorInfo);
}
render() {
if (this.state.hasError) {
return <div>Something went wrong: {this.state.error.message}</div>;
}
return this.props.children;
}
}

Answer 1

您的错误似乎没有得到处理，因为您试图将then((与async await结合起来，所以您的catch((永远不会被调用。尝试用一次尝试/捕获包围它

async function handleSearchSubmit(name) {
try {
const response = await unsplash.get("/search/photos", {
params: { query: name, per_page: 21, page: numPage },
})
if(response.data.results.length > 0){
setPhotos(response.data.results);
}else{
console.log(
`Message: there are no images available related to this name`
);
}
} catch (error) {
if (err.response) {
setErrors(err.response.data.errors);          
} else if (err.request) {
console.log(err.request);
} else {
console.log(`Error: ${err.message}`);
}
}
}