javascript - 如何更新状态中存在的 JSX 元素的状态？

Question

我有一个 JSX 元素和状态中的计数器，JSX 元素使用状态中的计数器状态。我用模态显示组件 1 中的 JSX 元素，并在组件 2 中设置 JSX 元素。

当我尝试更新组件 2 中的计数器时，组件 1 中的 JSX 元素计数器不会发生变化。

组件 1

class Meeting extends Component {

    render() {
        const { dispatch, modalVisible, modalContent } = this.props;

        return (
            <Landing>
                <Modal
                    title="Title"
                    visible={modalVisible}
                    onOk={() => { dispatch(showModal(false)); }}
                    onCancel={() => { dispatch(showModal(false)); }}
                    okText="Ok"
                    cancelText="Cancel"
                >
                    <div>
                        {modalContent}
                    </div>
                </Modal>
            </Landing>
        );
    }
}

function mapStateToProps(state) {
    const {
        modalVisible,
        modalContent,
        counter
    } = state.meeting;

    return {
        modalVisible,
        modalContent,
        counter
    };
}

export default connect(mapStateToProps)(Meeting);

组件 2

class MeetingItem extends Component {

    state = {
        checked: []
    }

    handleChange = (event) => {
        const { dispatch, counter } = this.props;
        if (event.target.checked) {
            this.setState(() => {
                return { checked: [...this.state.checked, event.target.value] };
            });
            dispatch(setCounter(counter - 1));
        } else {
            const array = this.state.checked;
            const index = array.indexOf(event.target.value);
            if (index > -1) {
                array.splice(index, 1);
                this.setState(() => {
                    return { checked: array };
                });
                dispatch(setCounter(counter + 1));
            }

        }

    };

    isDisable = (val) => {
        const array = this.state.checked;
        const index = array.indexOf(val);
        if (index > -1) {
            return true;
        } else {
            return false;
        }
    }

    showModal = () => {
        const { dispatch, question, counter } = this.props;

        const radioStyle = {
            display: 'block',
            height: '30px',
            lineHeight: '30px',
            marginTop: '6px'
        };

        dispatch(setCounter(0));

        switch (question.question.TypeAnswer) {
            case 'OneAnswer':
                const answers = question.answer.map((record, i) => {
                    return <Radio.Button style={radioStyle} key={i} value={record.Id}>{record.Title}</Radio.Button>
                });
                const modalContent = <div>
                    <p>{question.question.Title}</p>
                    <Radio.Group buttonStyle="solid">
                        {answers}
                    </Radio.Group>
                </div>

                dispatch(setModalContent(modalContent));
                break;
            case 'MultiAnswer':
                dispatch(setCounter(question.question.CountAnswer));

                const multiAnswers = question.answer.map((record, i) => {
                    return <Checkbox key={i} value={record.Id} onChange={this.handleChange}>{record.Title}</Checkbox>
                });
                const multiModalContent = <div>
                    <p>{question.question.Title}</p>
                    <p>counter: {counter}</p>
                    <Checkbox.Group>
                        {multiAnswers}
                    </Checkbox.Group>
                </div>

                dispatch(setModalContent(multiModalContent));
                break;
            case 'PercentAnswer':

                break;
            default: <div></div>
                break;
        }

        dispatch(showModal(true));
    };

    render() {
        const { title, question, fileDoc } = this.props;

        return (
            <Timeline.Item className='ant-timeline-item-right'>
                <span style={{ fontSize: '16px', fontWeight: 'bolder' }}>{title}</span> <span className='textAction' onClick={this.showModal}>showModal</span>
                {/* <br /> */}
                {/* <span>12:00</span>  <Icon type="clock-circle" /> */}
            </Timeline.Item>
        );
    }
}

function mapStateToProps(state) {
    const {
        visibleModal,
        counter
    } = state.meeting;

    return {
        visibleModal,
        counter
    };
}

export default connect(mapStateToProps)(MeetingItem);

行动

export const setCounter = (counter) => (dispatch) => {
    return dispatch({ type: actionTypes.SET_COUNTER, counter })
}

Answer 1

您必须在 connect 函数中使用 mapDispatchToProps。

...
function mapDispatchToProps (dispatch) {
    propAction: (action) => dispatch(reduxAction(action))
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MeetingItem);
...

关注此tutorial .