反应 setState 错误有人帮忙吗？ 缩小误差

Question

I have a dual list box but when i click the left or right button the item's transfer the other side its okay but ı got a error message in the console. When I Clear the rightClick this.setState error is gone but items never change or transfer other side. What I have to do? I analyze the error everyone says NODE_ENV=development I try but not working for me? I describe the this.setState() like that normally ı define this.setState({}) but ı cant define like that ı get a error message again anyone help?

this.state = {
      role: ['admin' , 'user' , 'subscriber' , 'superadmin'],
      activeRole:['admin1'],
      selectedIndex : 0,
      selectedItem : ''
      
    };

 menuClick = (activeItem,index) =>{
    this.selectedIndex = index;
    this.selectedItem = activeItem;
    // activeItem 1. arrayda varsa düğmeyi kapat
    // yoksa diğer düüme"112453
      // console.log('activeItem' + activeItem);
      // console.log('index' + index);
  }

  rightClick = ()=>{
    console.log(this.selectedIndex);
    console.log(this.state.role);
    this.setState(
      this.state.role.splice(this.selectedIndex, 1),
      this.state.activeRole.push(this.selectedItem)
    );
    
  }
  leftClick = ()=>{
    console.log(this.selectedIndex);
    console.log(this.state.role);
    this.setState(
      this.state.activeRole.splice(this.selectedIndex, 1),
      this.state.role.push(this.selectedItem)
    );
    
  }

Answer 1

update your functions as bellow

  rightClick = () => {
console.log(this.selectedIndex);
console.log(this.state.role);
this.setState({
  role: this.state.role.splice(this.selectedIndex, 1),
  activeRole: this.state.activeRole.push(this.selectedItem)
});

  }

  leftClick = () => {
console.log(this.selectedIndex);
console.log(this.state.role);
this.setState({
  activeRole: this.state.activeRole.splice(this.selectedIndex, 1),
  role: this.state.role.push(this.selectedItem)
});


 }