useState未更新状态

Question

我从2个api获取信息，其中一个是Unsplash api，它返回一个随机图像，另一个是第二个api，它通过cors-anywhere代理从ourmanna.com返回圣经经文。 unsplash api可以正常工作，并且始终返回图像。圣经api返回正确的数据，但useState不会更新状态，并且verse保留为空字符串。我不明白为什么会这样。

下面是代码：

import React, { useState, useEffect, Fragment } from "react";
import styles from "./BibleQuote.module.css";
import axios from "axios";
import Poster from "../Poster/Poster";
const UNSPLASH_API = process.env.REACT_APP_UNSPLASH_API;
const UNSPLASH_API_KEY = process.env.REACT_APP_UNSPLASH_API_KEY;

function BibleQuote() {
  const [photo, setImage] = useState({ poster: "" });
  const [verse, setVerse] = useState({ verse: "" });

  useEffect(() => {
async function fetchData() {
  await axios(UNSPLASH_API, {
    headers: {
      Authorization: `Client-ID ${UNSPLASH_API_KEY}`,
    },
  }).then((res) => {
    setImage(res.data.urls.regular);
    console.log("image", res.data.urls.regular);
  });
  await axios(
    `https://cors-anywhere.herokuapp.com/http://www.ourmanna.com/verses/api/get?format=text&order=random`).then((res) => {
         setVerse(res.data);
         console.log("APIquote", res.data);
         console.log("State: Quote", verse);
           });
         }
    fetchData();
   }, []);

 return (
   <Fragment>
     <Poster photo={photo} quote={verse} />
   </Fragment>
  );
 }

export default BibleQuote;

这是chrome开发人员工具中的结果：

Answer 1

我非常确定它已更新，但是状态更改后，您无法立即从console.log中看到它。尝试使用另一个useEffect仅在状态更改时有效。

const App = () => {
  const [data, setData] = useState(false)
  useEffect(()=> {
    setData(true)
    console.log(data) //shows false despite of setData on the previous line
  }, [])
  useEffect(()=> {
    console.log(data) //shows true - updated state
  }, [data])
  return <h2>Hello world</h2>
}

这是因为setState异步工作，所以下一行始终包含状态的前一个值。