警告：setState（...）：react reduxの既存の状態遷移中に更新できません

Question

ボタンをクリックすると常に警告が表示されます。私はそれを検索し、彼らは警告を削除するためにバインドを使用しますが、どのように私のコードでバインド関数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; 

還元型コードの場合は難しいです。私はそれをどのようにして還元するのか考えていません。私は一つだけのボタンを使用している場合

更新

アクション

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

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

リデューサーフォルダ

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

アンカーを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>