反应状态变量无法预测地发生变化

Question

我正在尝试首次使用React编写前端。

我偶然发现了一个问题，试图让用户选择订购React组件列表，然后撤消订购。

所以我尝试做的是将初始列表顺序保存在单独的状态变量skills_initial中。这是通过克隆技能列表来完成的。如果撤消订单，则使用skills_initial状态变量将其重置为初始订单。

 jQuery(function($) {

$( document ).on( 'click', '[name=prqu_minus]', function() {
     var $input = $(this).parent().find('input');
     var count = parseInt($input.val()) - 1;
     count = count < 1 ? 1 : count;
     $input.val(count);
     $input.change();
     $( 'div.woocommerce > form input[name="update_cart"]' ).prop( 'disabled', false );
     return false;
});


$( document ).on( 'click', '[name=prqu_plus]', function() {
     var $input = $(this).parent().find('input');
     $input.val(parseInt($input.val()) + 1);
     $input.change();
     $( 'div.woocommerce > form input[name="update_cart"]' ).prop( 'disabled', false );
     return false;
});

});

因此，前两次选中单选按钮，列表正确排序。只有在第二次尝试撤消订购时，列表才会保持有序。在任何地方都不会更改状态变量skills_initial，除非在我认为只被调用一次的构造函数中。

非常感谢有关我的代码结构/反应习惯的任何进一步建议。