Javascript CSS动画不适用于所有React组件

我正在开发一个仪表板应用程序，它从各种来源获取公司数据，并在React应用程序中的一些动画“tile”上显示这些数据。该应用程序将在超时后动态重定向到显示来自不同业务领域数据的不同页面。这一切都按预期进行，但其中一些平铺上的动画正在丢失

经过一点调查，我发现没有动画的平铺数量始终等于上一页显示的平铺数量（即，我的第二页当前有4个平铺，因此在重定向下一页的前4个平铺以进行动画制作后），因此这里一定存在某种连接

这是Dashboard类，它构建了整个过程

import React, { Component } from "react"
import axios from "axios"
import { GridList, GridListTile } from "@material-ui/core"

import "../assets/scss/tile.scss"
import Request from "../config.json"
import DataTile from "./DiagnosticDataTile"
import Loader from "./Loader"
import { IDiagnosticResultData } from "../interfaces/IDiagnosticResultData"
import { RouteComponentProps, withRouter } from "react-router"

interface IPropsPassed {
  category: string
  redirect: string
}

type IProps = IPropsPassed & RouteComponentProps

interface IState {
  result: IDiagnosticResultData[]
  pageWillChange: boolean
  loading: boolean
}

class Dashboard extends Component<IProps, IState> {
  maxTilesPerRow = 4
  changeTimeInMinutes = 5

  constructor(props: IProps) {
    super(props)

    this.state = {
      loading: true,
      result: null,
      pageWillChange: false
    }
  }

  componentDidMount(): void {
    axios
      .get(Request.url)
      .then(response => {
        this.setState({ result: response.data })
        this.setState({ loading: false })
      })
      .catch(error => {
        console.log(error)
      });
  }

  GetCellHeight(data: IDiagnosticResultData[]): number {
    return window.innerHeight / Math.ceil(data.length / this.maxTilesPerRow)
  }

  GetColour(isOk: boolean): string {
    const purples = ["#7e4c84", "#68396c", "#744177", "#78477f"]

    return isOk ? this.Sample(purples) : "#cd1010"
  }

  Sample(colour: string[]): string {
    return colour[Math.floor(Math.random() * colour.length)]
  }

  NoOfColumns(data: IDiagnosticResultData[]): number {
    return Math.min(data.length, this.maxTilesPerRow)
  }

  changePageAfter(minutes: number): void {
    setTimeout(() => {
      this.props.history.replace(this.props.redirect)
    }, minutes * 60000)
  }

  render() {
    if (!this.props) { return null }

    if (this.state.loading) {
      return <Loader />
    } else {
      var data = this.state.result.filter(x =>
        x.categories.includes(this.props.category)
      )
      this.changePageAfter(this.changeTimeInMinutes)
      return (
        <GridList
          cols={this.NoOfColumns(data)}
          cellHeight={this.GetCellHeight(data)}
          className="tileList"
        >
          {data.map((object, i) => (
            <GridListTile
              key={i}
              className="tile"
              style={{
                animationDuration: `${Math.random() * 2 + 1}s`,
                background: `${this.GetColour(object.status === "OK")}`
              }}
            >
              <DataTile data={object} />
            </GridListTile>
          ))}
        </GridList>
      )
    }
  }
}

export default withRouter(Dashboard)

import React，{Component}来自“React”
从“axios”导入axios
从“@material ui/core”导入{GridList，gridlistile}
导入“./assets/scss/tile.scss”
从“./config.json”导入请求
从“/DiagnosticDataTile”导入数据tile
从“/Loader”导入加载程序
从“./接口/IDiagnosticsultData”导入{IDiagnosticsultData}
从“react router”导入{RouteComponentProps，withRouter}
接口IPropsPassed{
类别：字符串
重定向：字符串
}
类型IProps=IPropsPassed&RouteComponentProps
界面状态{
结果：IDiagnosticResultData[]
pageWillChange:boolean
加载：布尔值
}
类仪表板扩展组件{
MaxTileSprrow=4
changeTimeInMinutes=5
建造师（道具：IProps）{
超级（道具）
此.state={
加载：对，
结果：空，
pageWillChange:false
}
}
componentDidMount（）：void{
axios
.get（Request.url）
。然后（响应=>{
this.setState（{result:response.data}）
this.setState（{loading:false}）
})
.catch（错误=>{
console.log（错误）
});
}
GetCellHeight（数据：IDiagnosticResultData[]）：编号{
return window.innerHeight/Math.ceil（data.length/this.maxTilesPerRow）
}
getcolor（isOk:boolean）：字符串{
常数紫色=[“#7e4c84”、“#68396c”、“#744177”、“#78477f”]
返回isOk？此.示例（紫色）：“#cd1010”
}
样本（颜色：string[]）：string{
返回颜色[Math.floor（Math.random（）*color.length）]
}
NoOfColumns（数据：IDiagnosticsultData[]）：编号{
返回Math.min（data.length，this.maxTilesPerRow）
}
changePageAfter（分钟数）：无效{
设置超时（（）=>{
this.props.history.replace（this.props.redirect）
}，分钟*60000）
}
render（）{
如果（！this.props）{return null}
if（this.state.loading）{
返回
}否则{
var data=this.state.result.filter（x=>
x、 类别。包括（此.props.category）
)
this.changePageAfter（this.changeTimeInMinutes）
返回(
{data.map（（对象，i）=>(
))}
)
}
}
}
使用路由器导出默认值（仪表板）

如果此描述过于模糊，请道歉。如果需要更多信息，我将尝试指定更多信息

---

谢谢

这是因为

处的

键

道具不是唯一的

我已经构建了一个简单的模型，其中密钥是唯一的，并且

动画仅在新的html元素上工作。如果键是唯一的，react会将其作为新的html对象处理