在React的useEffect中使用fetch时没有得到响应

Question

我是前端开发的新手，有一个问题，我似乎无法解决。我有一个Spring-boot应用程序与React前端。我试图从useEffect的前端获取数据。我可以在浏览器的网络选项卡中看到我正在获得响应，但它将状态设置为空。

import { useEffect, useState } from "react";
export default function Home() {
let [items, setItems] = useState("");
let [nrOfClick, setNrOfClicks] = useState(0);
useEffect(() => {
const dataFetch = async () => {
await fetch("http://localhost:8080/api/hellotxt", {
method: "get",
mode: "no-cors",
})
.then((data) => data.text())
.then((data) => setItems(data));
};
dataFetch();
}, []);
return (
<div className="App">
<h1>This is the home page</h1>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<p className="App-intro">
Fetch data from spring-boot server: <code>{items}</code>
</p>
<p>
Number of clicks <code>{nrOfClick}</code>
</p>
<button onClick={() => setNrOfClicks(nrOfClick + 1)}>Click ME</button>
</div>
);
}

尝试多种方式编写useEffect，但它不工作。希望状态随着fetch

的响应而更新

Answer 1

当您使用mode: "no-cors"时，您会收到一个不透明的响应。所以即使你在网络选项卡上看到了响应，你能使用的也不多。如果您像这样更改代码，您实际上可以看到您在控制台上返回的内容:

const dataFetch = async () => {
await fetch("http://localhost:8080/api/hellotxt", {
method: "get",
mode: "no-cors",
})
.then((data) => console.log(data)
.then((data) => setItems(data));
};

有一些好的信息你可以在:

试图使用fetch和传入模式:no-cors

https://fetch.spec.whatwg.org/concept-filtered-response-opaque