动态组件怎么可能覆盖彼此的状态？

Question

我创建了基于 Redux 调度的房间对象创建的动态房间组件。

{

    rooms && rooms.map((room, index) => {

        const { name, temperature, humidity, timestamp } = room

        return (

            <Col key={index} xs={12} md={6}>

                <Room 

                    index={index}

                    name={name} 

                    temperature={temperature} 

                    humidity={humidity}

                />

            </Col>

        )

    })

}

每个房间的细节都安装得当。我创建了一个函数来维护一个数组中的 10 个对象。但是，当数组被传递到 Rechart 时，我的组件似乎在同一状态之上更新。

class Room extends Component {

    linechart = () => {

        const { timestamp, temperature, humidity, name } = this.props

        const { chartData } = this.state

        if(chartData.length > 9) chartData.shift()

        chartData.push({

            name, 

            timestamp: moment(timestamp).format('mm:ss'), 

            temperature, 

            humidity})

    }

}

如您所见，组件详细信息显示正确。然而，chartData 的值被存储在相同的状态中，尽管它们是唯一的组件。

我以 1 秒的间隔运行该函数，日志显示状态以 0.5 秒的间隔更新。这意味着两个<Room/>组件都使用相同的<LineChart/>组件。有谁知道如何克服这个问题？