React翻轉移動沒有動畫

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}工作正常。