Reactjs 不使用togglepress更新反应状态

我正试图通过一个自定义组件切换谷歌地图中的信息窗口。当我检查是否记录了toggle方法时，正在调用该方法。代码如下：

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

/**
*创建人。
*/
从“React”导入*作为React
从“reactstrap”导入{Col，Row，Card，CardHeader，CardBody，CardColumns，CardText，CardFooter}
从“react google maps”导入{InfoWindow，Marker}
导出默认类home扩展React.Component{
状态={
伊索彭：错
}
toggleOpen=（）=>{
this.setState（（{isOpen}）=>(
{
伊索本：！伊索本，
}
));
if（this.state.isOpen）
日志（“状态为打开”）
其他的
日志（“状态未打开”）
}
render（）
{
const{isOpen}=this.state；
返回(
A.
{这个.道具.寄宿家庭}
{this.props.descripp}
{this.props.price}
)
}
}

您可以在此处查看自己的代码：

---

我无法打开信息窗口-有什么想法吗？

为了控制

infowindow

的可见性，您必须渲染或不渲染

，而不是将

isOpen

作为道具传递

下面是您应该如何做（）：

{isOpen&&
A.
{这个.道具.寄宿家庭}
{this.props.descripp}
{this.props.price}
}

请注意，调用

setState

不会立即更改所述的状态，因此，

控制台.log

可能不准确。如果你需要一个有效的例子

{ isOpen && <InfoWindow>
  <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> }