即使调用了渲染方法，React.js setState 也不会更新状态

Question

我不敢相信我不能通过 setState 更新状态。 我想更新 cardModalOpen 状态来关闭 Modal。

我添加了 bind(this) 但它仍然不起作用。

（Modal通过点击卡片组件打开）

但是，我通过closeModal() 函数做了setState({cardModalOpen: false})，但即使在调用渲染方法之后它仍然是正确的。

谁能解释一下我做错了什么。

这是我的代码。

index.js

import React, { Component }from 'react';
import { Button, Card, Image, Header, Modal, Form, Input } from 'semantic-ui-react'

class App extends React.Component {    
    state = { cardModalOpen:false }

    showCardModal() {
        this.setState({cardModalOpen:true})    
    }

    closeModal(){
        this.setState({cardModalOpen:false})
    }

    render() {
        const messagesDataNew = [];

        for (var i = 0; i < 3; i++) {
            messagesDataNew.push(
              <Card
                onClick={() => {
                  this.showCardModal();
                }}
              >
                <DetailModal
                  cardModalOpen={this.state.cardModalOpen}
                  closeModal={this.closeModal}
                />
              </Card>
            );
          }

        return <div>{messagesDataNew}</div>;
   }
}

DetailModal.js

import React, { Component }from 'react';
import { Button, Card, Image, Header, Modal, Form, Input } from 'semantic-ui-react'

class DetailModal extends Component{

render(){

    return(
        <Modal open={this.props.cardModalOpen} onClose={()=>{this.props.closeModal()}} >
            <Modal.Header>Select a Photo</Modal.Header>
            <Modal.Content image>
                <Image wrapped size='medium' src='https://react.semantic-ui.com/images/avatar/large/rachel.png' />
                <Modal.Description>
                    <Header>Default Profile Image</Header>
                    <p>We've found the following gravatar image associated with your e-mail address.</p>
                    <p>Is it okay to use this photo?</p>
                </Modal.Description>
            </Modal.Content>
            <Button onClick={()=>{this.props.closeModal()}}>Close</Button>
        </Modal>
    )
  }

  }

export default DetailModal;

这里是一个代码框，问题转载https://codesandbox.io/s/jjk7nw647y

Answer 1

在您共享的代码和框中，任何模式都没有可点击的触发元素。那是因为您正在渲染 Card 的空内容。

这是我对您的示例的更改https://codesandbox.io/s/l97n95n2om

唯一的区别是第 20 行 - 我添加了一个文本 Some text，因此您的 Card 组件具有有效的可见（和可点击）DOM 元素。

Answer 2

不要忘记绑定你的状态处理函数：

constructor(props){
  super(props)
  this.showCardModal=this.showCardModal.bind(this)
  this.closeModal =this.closeModal.bind(this)
}