Question

点击按钮后，我总是收到警告。我搜索它，他们使用bind来删除警告，但是如何将它添加到我的代码中对redux函数反应还是函数？

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中处理这个问题。

更新

动作文件夹

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

也许当你点击一个锚点时，其他人会被点击，因为它们是交错的。为了消除这种可能性，尝试为不同的锚使用不同的onClick处理程序，看看你是否还有错误。例如，让每个人都将不同的输出记录到控制台，而不是调度您的操作。然后我们肯定会知道。

<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>

警告：setState（...）：无法在react redux中的现有状态转换期间更新

1 个答案: