当我点击按钮时,我总是收到警告。我搜索它,他们使用绑定(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;
};
如果我只有一个按钮。我没有警告,但如果添加更多按钮。这将会发生
最佳答案
也许当您单击一个 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>
关于javascript - 警告 : setState(. ..):在 React Redux 中现有状态转换期间无法更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43600384/