Reactjs 中获取错误处理的问题

Question

我正在学习如何使用 fetch 并尝试使用以下语法：

const [stuff, setStuff] = useState([]);
const request = "link-to-API";

const data = await fetch(request)
    .then(response => response.json())
    .catch(err => {
      console.log(err);
      return {} //(or [], or an empty return, or any return at all)
    })

setStuff(data.hits)

然后，作为回报，我有：

{stuff.map((element) => (
        <Thing
          title={element.label}
          link={element.url}
        />
      ))}

我想只要我的 fetch 失败，我就可以渲染一个空对象。除了，这仅在 fetch 本身有效时才有效。 React 给了我错误

"对象作为 React 子对象无效（发现：TypeError: Failed to 获取）。”

但我在网上找不到任何解决方案。我怎么能不渲染任何东西来处理错误？ （这不是我要渲染的唯一部分，我只想渲染一个空的 div，而不是有条件地渲染该部分）

Answer 1

当你使用await 时，你不能使用then 和catch 方法

在async 函数中使用await 很重要

let data = null
try{
    const response = await fetch(request)
    data = response.json();
} catch(err)  {
      console.log(err);
    }

Answer 2

您可以尝试删除 await 关键字，因为您正在使用 .then 数据获取部分也应该包含在 useEffect 中

const [stuff, setStuff] = useState([]);
const request = "link-to-API";
    
useEffect( ()=> {
    fetch(request)
    .then(response => response.json())
    .then(data => setStuff(data.hits))
    .catch(err => {console.log(err)})
},[])