반응 플립 이동에 애니메이션이 적용되지 않습니다.

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}이 정상적으로 작동합니다.