Javascript 如何更新JSX元素在状态中的状态？

我在状态中有一个JSX元素和一个计数器，JSX元素在状态中使用计数器状态。我用modal在组件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);

---

您必须将

mapDispatchToProps

用于

connect

功能

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

---

遵循此操作。

仅在连接内部使用mapDispatchToProps。

在Fiddle中共享您的代码我使用它，它使用新的计数器值修改状态，但在组件1中它不会更改文本我认为您的操作应该如下所示：

导出常量setCounter=（计数器）=>{return type:actionTypes.SET\u counter，counter}

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

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