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

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为了获得新的状态:

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