Question

我正在尝试通过自定义组件关闭和打开react-google-maps中的信息窗口。当我检查它是否被记录时，正在调用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>
        )
    }
}

点击它时，infowindow没有打开。有什么想法吗？

编辑---- 我改变了你提到的切换方法，但是切换仍然没有响应。这是我在sandeditor中的项目：https://codesandbox.io/s/93258nn8m4

Answer 1

您需要将状态置于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")     
            }
        );        
    }

P.S。 Beware because React setState is asynchronous!

<强>更新

注意，如果你没有在类中定义构造函数，那就没问题。因为The constructor is dead。

但是，您的转换器仍然会以令人满意的构造函数形式生成它。

这是你问题的一部分;没有构造函数的设置状态很好，但setState肯定不是。

Answer 2

这会重置isOpen值。一旦设置为当前值，并在回调中切换它。

this.setState(({ isOpen }) => (
            {
                isOpen: !isOpen,
            }
        ));

正确的方式：

this.setState(prevState) => (
            {
                isOpen: !isOpen,
            }
        ));

反应状态没有更新

2 个答案: