Javascript 反应翻转移动不设置动画

我正在尝试使用

react flip move

，但由于某些原因，它无法设置动画。 请看一下这个

\u句柄=（）=>{
如果（x%2==0）{
this.setState（{data:this.state.data.sort（（a，b）=>a.name.localeCompare（b.name）））；
}否则{
this.setState（{data:this.state.data.sort（（b，a）=>a.name.localeCompare（b.name）））；
}
x++；
}
render（）{
const{data}=this.state；
返回(
分类
{data.map（（o，i）=>(

{o.name}

))}
);
}
} 

键道具必须是除索引（0,1,2…n）以外的任何内容

在上面的示例中，

key={o.name}

而不是

key={i}

工作正常

 _handle = () => {
    if(x % 2 == 0){
      this.setState({ data: this.state.data.sort((a, b) => a.name.localeCompare(b.name)) });
    }else{
      this.setState({ data: this.state.data.sort((b, a) => a.name.localeCompare(b.name)) });
    }
    x++;
  }
  render(){
    const {data} = this.state;
     return (
       <div>
         <button onClick={this._handle}>Sort</button>
       <FlipMove 
         duration={750}     
         easing="ease-out"
         enterAnimation = "accordianVertical"
         leaveAnimation = "accordianVertical"
         >
         {data.map((o,i) => (
           <li className="line" key={i} >
             {o.name}
           </li>
          ))}
       </FlipMove>       
       </div>
     );
  }
}