Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

153
Views
How can i re-render observable array-data in Mobx?

How can i re-render observable array-data in Mobx? I used 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 use mobx6 and react-typeacript. Comp class dosen't re-rendering when i run quizSelect function. Do not check mobx observable data point of different deeply? @observable.deep is not working too.

How can i fix it?

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

I believe the problem lies in the componentWillMount method where you're overwriting the original array which you've marked observable. Things like arrays and objects are handled a bit differently since they are reference types and not value types.

Pushing the elements into the existing array rather than reassignment should fix the issue:

public componentWillMount() {
    this._quizs.push(...this.props.actions.getData());
}
about 4 years ago · Juan Pablo Isaza Report

0

I found answer. Reference type need reallocation.

this._quizs[idx].selected = v;
this._quizs = _.cloneDeep(this._quizs);
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!