如何解决useState未更新状态
我从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开发人员工具中的结果:
解决方法
我非常确定它已更新,但是状态更改后,您无法立即从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异步工作,所以下一行始终包含状态的前一个值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。