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

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/>组件。有谁知道如何克服这个问题？