fetch .then 语句后反应状态不更新

所以我试图发出一个 API 请求,然后将响应保存到状态中。

await fetch(url)
.then((response) => response.json())
.then((data) => setSearchResponse(data))
.then(console.log("api request fired."))
.then(console.log(searchResponse.results))

当我 console.log 状态时,它仍然作为一个空对象出现。如果我第二次运行代码,它会按预期工作。在调用 console.log 之前状态似乎没有更新,但我的理解是这是异步代码,每条 .then 行在上一行完成之前不会触发?

铬控制台:

enter image description here

编辑:为清晰添加更多代码

function App() {
const [searchResponse, setSearchResponse] = useState("");
const [secondarySearchResponse, setsecondarySearchResponse] = useState();
const [information, setInformation] = useState();
const [secondaryInformation, setSecondaryInformation] =    useState(null);
const [dataReady, setDataReady] = useState(false);
const pos = useRef(null);

useEffect(() => {
navigator.geolocation.getCurrentPosition((position) => {
  pos.current = position;
  console.log(pos.current);
});
}, []);

const key = "";
var num = Math.floor(Math.random() * 20 + 1);
var place_id;

async function fetchInfo() {

const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${pos.current.coords.latitude},${pos.current.coords.longitude}&radius=12000&type=restaurant&key=${key}`;

await fetch(url)
  .then((response) => response.json())
  .then((data) => setSearchResponse(data))
  .then(console.log("api request fired."))
  .then(console.log(searchResponse))
}

我用一个按钮 onClick 调用这个函数:

<Button variant="primary" onClick={fetchInfo}>
   Spin
 </Button>{" "}
stack overflow React state not updating after fetch .then statement
原文答案
author avatar

接受的答案

您不能只使用冗余代码继续 fetch 调用的承诺链,并期望状态正确反映。

状态是异步更新的(或者更确切地说,状态更新涉及异步过程)。所以仅仅因为 fetch Promise 链移动到下一个 .then ,并不意味着 react 完成了状态更新过程。

假设这段代码在您的 useEffect 生命周期方法中:

await fetch(url)
.then((response) => response.json())
.then((data) => setSearchResponse(data))

然后,您可以在 jsx 中的 render 方法中使用组件中的 searchResponse 状态数据。这是因为每次状态发生变化都会更新 jsx,因此状态更新会反映在这里。

还有其他方法可以查看代码中的状态更新。这里的重要概念是理解为什么您在这种特殊情况下 can't


答案: