Is there a way to re-render observable array data in Mobx? I have used the observer decorator in this class.
interface IQuiz {
quizProg: TypeQuizProg;
qidx: number;
state: IStateCtx;
actions: IActionsCtx;
}
@observer
class Comp extends React.Component<IQuiz> {
private _qtype: common.TypeQuiz = '';
private _qtime = 60;
@observable _quizs: common.IQuizData[] = [];
constructor(props: IQuiz) {
super(props);
makeObservable(this);
};
public componentWillMount() {
this._quizs = this.props.actions.getData();
}
@action
public quizSelect(idx: number, v: boolean) {
this._quizs[idx].selected = true;
this._quizs.slice();
}
public render() {
const {state, actions, qidx} = this.props;
let ItemComponent;
if(this._qtype === 'unscramble') ItemComponent = QuizUnscramble;
if(this.props.state.prog !== 'quiz') {
return <QuizList
state={state}
quizs={this._quizs}
quizSelect={(idx: number, v: boolean) => {
this.quizSelect(idx, v);
}}
/>
} else {
return (
<QuizBox
view={true}
className="t_quiz"
quizProg={state.quizProg}
qidx={qidx}
qtype={this._qtype}
qtime={this._qtime}
quizs={this._quizs}
ItemComponent={ItemComponent}
isteacher={false}
setQuizProg={actions.setQuizProg}
/>
);
}
}
}
const Quiz = useTeacher((store: TeacherContext) => (
<Observer>{() => (
<Comp
quizProg={store.state.quizProg}
qidx={store.state.qidx}
state={store.state}
actions={store.actions}
/>
)}</Observer>
));
I am working with MobX6 and React TypeScript. However, the Comp class does not re-render when the quizSelect function is executed. It seems like @observable.deep is also not functioning properly. Could it be an issue with checking deeply nested mobx observable data points?
Does anyone know how to resolve this issue?