Question

我希望用户单击的任何内容都出现在模式中。在这种情况下，我希望在用户单击a random name时通过displayPerson()粗箭头功能将<Button/>出现在模式中。

在<Modal/>之间，我试图显示它，但是它不起作用。这只是一个空白屏幕。

该模态在使用redux进行切换和/或关闭方面没有问题。我面临的唯一问题是，只有当用户单击按钮时，模态内才会出现什么。

为什么它不能像我那样做？

import React, { Component } from 'react';
import { connect } from 'react-redux';

import Modal from 'react-modal';    
import Aux from '../../../../hoc/Aux';
import Button from '../Buttons/Button';
import CheckoutButton from '../../../../components/UI/buttons/CheckoutButton/CheckoutButton';

import { CLOSE_MODAL, OPEN_MODAL } from "../../../../store/action/NoNameAction";

class Main extends Component {
    state = {
        isClicked: false
    }

    componentWillMount() {
        Modal.setAppElement('body');
    }

displayPerson = () => {
    this.setState({isClicked: true});

    if(this.state.isClicked) {
        return(
            <p>a random name</p>
        );
    }
}

    render() {
        return (
            <Aux>
                <Button clicked={() => this.props.thisButtonChosen() && this.displayPerson()} label={"This button"}/>               

                <CheckoutButton clicked={() => this.props.openModalRedux()}/>

                <Modal isOpen={this.props.isOpen}>
                 <p>{this.displayPerson}</p>
                    <button onClick={() => this.props.closeModalRedux()}>Close</button>
                </Modal>
            </Aux>
        );
    }
}

const mapStateToProps = state => {
    return {
        isOpen: state.global.isModalOpen
    }
};

const mapDispatchToProps = dispatch => {
    return {
        thisButtonChosen: () => dispatch({type: THIS_BUTTON_CHOSEN}),

        // Modal handlers
        openModalRedux: () => dispatch({type: OPEN_MODAL}),
        closeModalRedux: () => dispatch({type: CLOSE_MODAL})

    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Main);

Answer 1

this.displayPerson返回的值取决于下一个状态更新，但是setState is asynchronous。
您可以使用callback来获取新的state：

displayPerson = () => {
    this.setState({isClicked: true}, () => {
        if(this.state.isClicked) {
          return(
            <p>a random name</p>
          );
        }
    });
}

但是即使采用这种方法，您也可能会遇到一些问题。
我建议也将随机名称存储在状态中。

displayPerson = () => {
    const randomUserName = "some random user name...";
    this.setState({isClicked: true, randomName: randomUserName});
}

只需在render中使用它即可：

<p>{this.state.randomUserName}</p>

当然，您需要触发displayPerson

为什么它不能以这种方式显示用户单击以显示在模式中的内容？

1 个答案: