React flip move不动画

Question

我试图使用react-flip-move但由于某种原因它没有动画。 Plz看看这个。

https://www.webpackbin.com/bins/-KtqTYBCgNDqG0bDeDNA

 _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>
     );
  }
} 

Answer 1

key道具必须是索引（0,1,2 ... n）之外的任何东西。

在上面的示例中，key={o.name}代替key={i}正常工作。