在获取 .then 语句后反应状态不更新

Question

所以我正在尝试发出 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 直到上一行完成后才会触发？

Chrome 控制台：

编辑：为清晰度添加更多代码

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))
}

我在单击按钮时调用此函数：

<Button variant="primary" onClick={fetchInfo}>
   Spin
 </Button>{" "}

Answer 1

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

状态是异步更新的。因此，仅仅因为获取承诺链移动到下一个 .then，并不意味着反应已完成状态更新过程。

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

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

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

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

在获取 .then 语句后反应状态不更新

React state not updating after fetch .then statement

state

reactjs