react.js操作Dom的问题

Question

我需要实现如图所示的功能：一个动态加载的列表，更新后点击相应列表切换勾选状态，同时把当前状态用localstorage存储起来，以便下一次进入能记住之前选择。
遇到的问题：功能实现了，不过测试时发现这个点击列表事件时而触发时而不触发，视图上勾选状态变化了，但是localstorge有时不会跟着变化，刷新下可能又恢复正常，多点击几次就又出现了

componentDidUpdate:function(){

    
    var a = JSON.parse(window.localStorage.checked)||[];

    //阻止冒泡
    $("input:checkbox[name='chooselibs']").click(function(){
        event.stopPropagation();
    });

    //点击列表事件
    $('.listCheckBox').on('click',function(){
        var value = $(this).find("input:checkbox[name='chooselibs']").prop('checked');
        
        //选择or未选择
        if(value){
            $(this).find("input:checkbox[name='chooselibs']").prop('checked','');
            a[$(this).index()-1] = 0;
        }else{
            $(this).find("input:checkbox[name='chooselibs']").prop('checked','checked');
            a[$(this).index()-1] = 1;
        }

        window.localStorage.checked = JSON.stringify(a)    
    })
    });
},

Answer 1

不应该在 componentDidUpdate 里添加事件绑定，那样的话每更新一次就会多绑定一次事件处理，可以放到componentDidMount 里，在 componentWillUnmount 里移除事件绑定