reactjs - 反应状态未更新
问题描述
我正在尝试通过自定义组件关闭和打开 react-google-maps 中的信息窗口。当我检查它是否已记录时,正在调用切换方法。这是代码:
/**
* Created by.
*/
import * as React from 'react'
import {Col, Row, Card, CardHeader, CardBody, CardColumns, CardText, CardFooter} from 'reactstrap'
import {InfoWindow, Marker} from 'react-google-maps'
export default class home extends React.Component {
state = {
isOpen: false
}
toggleOpen = () => {
this.setState(({ isOpen }) => (
{
isOpen: !isOpen,
}
));
if(this.state.isOpen)
console.log("state is open")
else
console.log("state is not open")
}
render()
{
const { isOpen } = this.state;
return (
<Marker
position={this.props.position}
onClick={this.toggleOpen}>
<InfoWindow isOpen={isOpen}>
<Card className="hovercard">
<Row>
<CardColumns sm={6} lg={3}>a
<CardHeader>
{this.props.homestay}
</CardHeader>
<CardText className="avatar">
<img alt="profile img" src={this.props.profilePic}/>
</CardText>
<div className="info">
<CardText>{this.props.descrip}</CardText>
</div>
<CardFooter>
{this.props.price}
</CardFooter>
</CardColumns>
</Row>
</Card>
</InfoWindow>
</Marker>
)
}
}
单击它时,信息窗口未打开。有任何想法吗?
编辑----我改变了你提到的切换方法,但切换仍然没有响应。这是我在 sandeditor 中的项目:https ://codesandbox.io/s/93258nn8m4
解决方案
您将需要在constructor
第一次初始化或创建类的实例时放入状态,但并非总是需要,而是使用它来保持最佳实践。
constructor() {
this.state = {
isOpen: false
}
}
另外,我不知道这是否是 setState 的正确方法
改变这个
toggleOpen = () => {
this.setState(({ isOpen }) => (
{
isOpen: !isOpen,
}
));
if(this.state.isOpen)
console.log("state is open")
else
console.log("state is not open")
}
对此
toggleOpen = () => {
this.setState({isOpen: !this.state.isOpen},() => {
if(this.state.isOpen)
console.log("state is open")
else
console.log("state is not open")
}
);
}
更新
刚刚注意到,如果您不在类中定义构造函数,那是可以的。因为构造函数已经死了。
但是,您的转译器仍然会以令人满意的构造函数形式生成它。
所以你问题的那一部分;在没有构造函数的情况下设置状态很好,但setState
绝对不是。
推荐阅读
- php - php按数字插入多个数据
- amazon-web-services - 创建 CloudFormation 模板以创建多个 Glue 连接
- apim - 用于多租户 Azure Web 应用程序的 APIM validate-jwt:IDX10205
- reactjs - 打字稿,使用字符串查找枚举
- python - 从与 VegaLite/Altair 图的交互中向外发射信号/事件的解决方法?
- nifti - 使用 nibabel 的图像方向
- c# - 当我使用 DropDownListFor 时,我可以显示所选项目但 Id 不正确
- javascript - 通过 fastify 使用 ajv 格式
- git - 如何在 Windows 版 Git Bash 中切换 github 用户?
- subprocess - SubprocVecEnv 不适用于自定义环境(稳定基线 - 健身房)