如何在react中呈现更新状态？
如何在react中呈现更新状态？
提问于 2021-11-08 14:07:31
我正在处理类组件中的React，我声明了一些状态，然后从API中获取数据并将该状态更改为新值，但React并不是在呈现状态的新值。但是，如果我在console.log()中声明了它，就会在控制台上给出新的值。
我的代码
class Home extends Component {
constructor(props) {
super(props);
this.state = {
unread: 0,
}
this.getUnread()
}
getUnread = async () => {
let data = await Chatapi.get(`count/${this.props.auth.user.id}/`).then(({ data }) => data);
this.setState({ unread: data.count });
console.log(this.state.unread)
}
render() {
const { auth } = this.props;
return (
<div>
{this.state.unread}
</div>
)
}这是在控制台上打印2，但在屏幕上呈现0。如何获得更新状态(2)以在屏幕上呈现。
如果我访问另一个页面，然后返回到这个页面，那么它将呈现状态(2)的新值。
回答 2
Stack Overflow用户
发布于 2021-11-08 14:11:46
请在getUnread()函数中调用componentDidMount，如下所示
componentDidMount() {
this.getUnread()
}Stack Overflow用户
发布于 2021-11-10 06:04:03
这是因为在React类组件中，当调用setState时，不直接传递值来设置状态更安全(因此，重新呈现组件)。这是因为状态是按照命令设置的，但是当组件被重命名时，状态再次被设置为初始值，这就是呈现的内容。
您可以阅读反应文档中给出的这个问题及其解决方案。
传递一个设置值的函数。
所以，setState的代码应该是
this.setState((state) => { unread: data.count });因此，您的更新代码将是：
class Home extends Component {
constructor(props) {
super(props);
this.state = {
unread: 0,
}
this.getUnread()
}
getUnread = async () => {
let data = await Chatapi.get(`count/${this.props.auth.user.id}/`).then(({ data }) => data);
this.setState((state) => { unread: data.count });
console.log(this.state.unread)
}
render() {
const { auth } = this.props;
return (
<div>
{this.state.unread}
</div>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69884808
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号