The computed specified array subscript in react will not update automatically

[StringKe]

import { makeAutoObservable } from 'mobx';

import { observer } from 'mobx-react-lite';

class TestData {
	list: any[] = [];
	listIndex = -1;

	constructor() {
		makeAutoObservable(this);
	}

	get activeItem() {
		return this.list.reduce((result, item, index, arr) => {
			if (index === this.listIndex) {
				result = item;
				// End the loop early
				arr.splice(1);
			}
			return result;
		});
	}

	changeIndex() {
		this.listIndex += 1;
	}

	changeListData() {
		this.list[0].list[0] = { a: 1, b: 2 };
	}

	changeList() {
		this.list.push({
			id: Math.floor(Math.random() * 100000),
			data: {},
			list: [{ a: 1 }],
		});
	}
}

const testData = new TestData();

const TestComponent = observer(() => {
	const item = testData.activeItem;
	if (!item) {
		return null;
	}

	return (
		<div>
			{item.id} {item.list}
		</div>
	);
});

The computed activeItem will not respond correctly, what do I need to do to achieve this function?

[urugator]

Dunno what the intention is, but computed shouldn't mutate observables (arr.splice(1)). Maybe you just wanna do the following?

get activeItem() {
  return this.list[this.listIndex];
}

[StringKe]

https://codesandbox.io/s/elastic-browser-rk0vm?file=/index.js

The component will not refresh when the "update element" button is clicked

[urugator]

You're missing observer on PageRender

[StringKe]

PageRender is a third-party package, it does not use mobx

[urugator]

Then you can't pass observables to that component, you can use <PageRender page={toJS(selectPage)} />, please see:
https://mobx.js.org/react-integration.html#dont-pass-observables-into-components-that-arent-observer
mobxjs/mobx-react#484 (comment)

[StringKe]

okay, thank you,