Question

我正在建立一个日历，按日期和时间显示事件（间隔30分钟）。

我已经在下面以简化的方式复制了代码（请检查我登录控制台以了解奇怪的行为）。

 Parent {
    this.state = {
        events: [...]
    }

     handleNewEvent() {
        this.setState({events: newArray})
     }

     render() {
        console.log("Parent: " + this.state.events.length);
        <Calendar events={this.state.events} />
        <AnotherComponent handleNewEvent={this.handleNewEvent}
     }
}

Calendar {

    const times =  ['08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30'];

    render() {
        console.log("Calendar: " + this.props.events.length);

        var items = times.map((time) => {
            console.log("Items.map: " + this.props.events.length);
            return <CalendarRow key={time} time={time} events={this.props.events} />
        })
    }
}

CalendarRow {
    render() {
         console.log("CalendarRow: " + this.props.events.length);
         // Table row where I filter and display events
    }
}

当我将新事件推送到事件数组时，Calendar和CalendarRow会收到新道具，但CalendarRow只会呈现一次（使用＆＃34; 08 ：00＆＃34;价值）。这是控制台中出现的内容：

// Before updating the state
Parent: 3
Calendar: 3
Items.map: 3 (26 times)
CalendarRow: 3 (26 times)

// After updating the state
Parent: 4
Calendar: 4
Items.map: 4 (26 times)
CalendarRow: 4 (1 time)

我不明白为什么地图功能在第一个项目上停止而所有其他项目保持不变。我尝试过更改key但没有成功

地图功能不反映道具变化

0 个答案: