¿Cómo puedo volver a renderizar datos de matriz observables en Mobx? Usé el decorador observador en esta clase.
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> ));Yo uso mobx6 y react-typeacript. La clase comp no se vuelve a renderizar cuando ejecuto la función quizSelect. ¿No verifique el punto de datos observable de mobx de diferentes profundidades? @observable.deep tampoco funciona.
¿Cómo puedo arreglarlo?
Creo que el problema radica en el método componentWillMount en el que está sobrescribiendo la matriz original que ha marcado como observable . Cosas como matrices y objetos se manejan de manera un poco diferente ya que son tipos de referencia y no tipos de valor.
Empujar los elementos en la matriz existente en lugar de la reasignación debería solucionar el problema:
public componentWillMount() { this._quizs.push(...this.props.actions.getData()); }Encontré respuesta. El tipo de referencia necesita reasignación.
this._quizs[idx].selected = v; this._quizs = _.cloneDeep(this._quizs);