I have the following classes, simplified for readability:
const TimelineTable = observer(() => {
const [timeline] = useState(() => getTimeline())
console.log(timeline.pointsInTime.length)
return (
<DataTable
records={timeline.pointsInTime}
columns={...}
/>
)
})
export default TimelineTable
export class Timeline {
pointsInTime: PointInTime[] = []
constructor() {
makeAutoObservable(this)
}
addPointInTime = (pointInTimeToWrite: PointInTimeWriteOnly) => {
PointInTimeAPI.post(pointInTimeToWrite)
.then(
action("postPointInTimeSuccess", pointInTime => {
this.pointsInTime.push(pointInTime)
}))
}
deletePointInTime = (id: number) => {
PointInTimeAPI.delete(id)
.then(
action("deletePointInTimeSuccess", () => {
const pointInTimeIndex = this.findPointInTimelineIndex(id)
this.pointsInTime.splice(pointInTimeIndex, 1)
}))
)
}
...
So far this was working as intended, with the table updating when I changed the pointsInTime-Array. But as I was cleaning up I noticed something strange: If I remove the log-output, the TimelineTable
does not register changes to the array anymore.
Why would it make a difference if I log the observable state? And how would I have to change this setup so TimelineTable
does update whenever pointsInTime changes?