0
私は、チェックボックスを切り替えるとonClickリスナーがレンダリング全体に累積したり、何度も点滅しているように見えます。React-Bootstrap onClickトリガーは、チェックボックスに蓄積され、何度も実行されます。
私はこのように、チェックボックスを生成するために、アレイの上にマッピングです：
const list = permissions[cat].map((p) => {
// map the role's permissions to the checked state of the "all" permission checkboxes
const checked = _.findWhere(role.permissions, {id: p.id}) ? true : false;
return <CheckBox key={p.id}
checked={checked}
label={p.operation}
onChange={e => this.togglePermission(p.id)} />;
});
チェックボックスは次のようになります。
togglePermission(id) {
this.props.togglePermissionOnRole(id);
}
const CheckBox = ({ checked, label, onChange }) => (
<Input
checked={checked}
type="checkbox"
label={prettyPrint(label)}
onChange={onChange} />
);
とthis.togglePermssionは次のようになります
何が起こっているのは、チェックボックスを切り替えると、reduxアクションが送出され、components entが再レンダリングされます。チェックボックスをもう一度（同じか別の）切り替えると、this.togglePermissionが複数回呼び出されます。より多くのチェックボックスを切り替えると、実行される時間は指数関数的に増加するようです。
なぜこの現象が起こるかに関するアイデアはありますか？
私には何も間違っていないようですか？ – whitep4nther
もっとうまくコードが役に立つでしょう。あなたは ''の実装と残りのレンダリングメソッドの実装を 'list'を使う場所で表示できますか？ – azium
@aziumそれは 'react-bootstrap'です - 私はレンダリングメソッドの残りの部分を追加しましたが、そこには面白いことは他にありません。 @Omarjmhこれは私の悪いことでしたが、 'onChange'と' onClick'の両方が同じ振る舞いをしています。あなたが言っていることが当てはまる場合、クリックはメソッド呼び出しの無限ループを開始しませんか？それはここでは起こりません。 – Zen