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)    

    })

    });

},