javascript - 警告 : setState(. ..):在 React Redux 中现有状态转换期间无法更新

Question

当我点击按钮时，我总是收到警告。我搜索它，他们使用绑定(bind)来删除警告，但是我如何添加它以在我的代码中对绑定(bind)函数使用react？

import * as React from 'react';
import {connect} from 'react-redux';
import {toggleModal} from '../../actions/ModalActions';

interface Props {
    show?: boolean;
    onSelectedSample: (value: boolean) => void;
}

const SampleList = ({show, onSelectedSample}: Props) => {

  return (
     <div>
        <a  className='button link info' onClick={() => onSelectedSample(!show)}><i className='fa fa-user-plus fa-fw'></i></a>
        <a  className='button link info' onClick={() => onSelectedSample(!show)}><i className='fa fa-user-plus fa-fw'></i></a>
        <a  className='button link info' onClick={() => onSelectedSample(!show)}><i className='fa fa-user-plus fa-fw'></i></a>
      </div>
    );
});


const mapStateToProps = (state, props) => {
    return {
        show: state.modalReducer.show,
    };
};

const mapDispatchToProps = (dispatch, props) => {
    return {
        onSelectedSample: (toggle: boolean){
            dispatch(toggleModal(toggle));
        },
    };
};

const ListSampleContainer = connect(mapStateToProps, mapDispatchToProps)(SampleList);
export default ListSampleContainer;

在 redux 代码中很难。我不知道如何在 redux 中处理这个问题。

更新

Action 文件夹

import {ModalActions} from '../constants/ModalConstants';

export const toggleModal = (show?: boolean) => {
    return {
        type: ModalActions.TOGGLE_MODAL,
        show,
    };
};

Reducer文件夹

import {ModalActions} from '../constants/ModalConstants';

interface State {
    show: boolean;
}

const initState = {show: false};

export const modalReducer = (state: State = initState, action) => {
    switch (action.type) {
        case ModalActions.TOGGLE_MODAL:
            if (action.show) {
                return {show: action.show};
            } else {
                return {show: !state.show};
            }

        case ModalActions.HIDE_MODAL:
            return {show: false};
    }
    return state;
};

如果我只有一个按钮。我没有警告，但如果添加更多按钮。这将会发生

Answer 1

也许当您单击一个 anchor 时，其他 anchor 也会以某种方式被单击，因为它们是交错的。为了消除这种可能性，请尝试对不同的 anchor 使用不同的 onClick 处理程序，然后查看是否仍然存在错误。例如，让它们中的每一个都将不同的输出记录到控制台，而不是分派(dispatch)您的操作。然后我们就可以确定了。

<a  className='button link info' onClick={() => onSelectedSample1(!show)}><i className='fa fa-user-plus fa-fw'></i></a>
<a  className='button link info' onClick={() => onSelectedSample2(!show)}><i className='fa fa-user-plus fa-fw'></i></a>
<a  className='button link info' onClick={() => onSelectedSample3(!show)}><i className='fa fa-user-plus fa-fw'></i></a>