I'm new to MobX and I need to use old version of this (6.3.1).Can you explain me right way to use it?I have Picker, but when this value change - there is no update on the screen. But variable have new value.
import React, { Component } from "react";import { collection } from "@cuba-platform/react-core";import { ActivityIndicator, ScrollView, StyleSheet, Text, View,} from "react-native";import { PredefinedView } from "@cuba-platform/rest";import { observer } from "mobx-react";import { colors } from "../styles/palette";import { StmObj, StmObjView } from "../cuba/entities/pros_StmObj";import { Table, TableWrapper, Row } from "react-native-table-component";import { Picker } from "@react-native-picker/picker";const styles = StyleSheet.create({ container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: "#fff" }, header: { height: 50, backgroundColor: "#537791" }, text: { textAlign: "center", fontWeight: "100" }, dataWrapper: { marginTop: -1 }, row: { height: 100, backgroundColor: "#E7E6E1" },});@observerexport class TelemetryTable extends Component { usersData = collection<StmObjView<"_local">>(StmObj.NAME, { view: PredefinedView.LOCAL, limit: 5, }); setRowCountValues(rowCounterNew: any) { this.state.rowCounter = rowCounterNew; console.log( this.state.rowCounter +"call change value function" + rowCounterNew ); } constructor(props) { super(props); this.state = { rowCounter: 25, tableHead: ["Название","Код Naumen","Адресподоговору","Ид. висточнике","Инвентарныйномер","Координаты","ИДПУСТМ","Периодичностьопроса", // "Обсл. подразделение", // "Комментарий", // "Код", // "Серийныйномер", // "АдресФИАС", // "Модельсистемытелеметрии", // "УУГ", // "Пультстм", // "Датавводавэксплуатацию", // "СпособпередачиданныхнаПУ", // "Времяопроса", ], widthArr: [150, 100, 120, 100, 100, 90, 90, 120], }; } render() { const { status, items } = this.usersData; if (status !== "DONE") { return <ActivityIndicator color={colors.textPrimary} />; } const state = this.state; const tableSTMData = []; const tableData = []; for (let i = 0; i < items.length; i += 1) { const rowData = []; for (let j = 0; j < 8; j += 1) { if (j === 0) rowData.push(items[i].name); if (j === 1) rowData.push(items[i].alterCode); if (j === 2) rowData.push(items[i].address); if (j === 3) rowData.push(items[i].orig); if (j === 4) rowData.push(items[i].alterSecondCode); if (j === 5) rowData.push(items[i].location); if (j === 6) rowData.push(items[i].stmDeskId); if (j === 7) rowData.push(items[i].surveyFrequency); } tableData.push(rowData); } return (<><Text>Показыватьстрок</Text><Picker mode="dropdown" selectedValue={state.rowCounter} onValueChange={(val, key) => this.setRowCountValues(val)}><Picker.Item label="1" value={1} key={0} /><Picker.Item label="25" value={25} key={1} /><Picker.Item label="50" value={50} key={2} /><Picker.Item label="100" value={100} key={3} /><Picker.Item label="Всезаписи" value={10000} key={4} /></Picker><ScrollView horizontal={true}><View><Table borderStyle={{ borderWidth: 1, borderColor: "#C1C0B9" }}><Row data={state.tableHead} widthArr={state.widthArr} style={styles.header} textStyle={styles.text} /></Table><ScrollView style={styles.dataWrapper}><Table borderStyle={{ borderWidth: 1, borderColor: "#C1C0B9" }}> {tableData.map((rowData, index) => (<Row key={index} data={rowData} widthArr={state.widthArr} style={[ styles.row, index % 2 && { backgroundColor: "#F7F6E7" }, ]} textStyle={styles.text} /> ))}</Table></ScrollView></View></ScrollView></> ); }}
When I call setRowCountValues, it is work and change variable in state. I was thinking it will automaticly rerender. But on screen there is still no change value in Picker.Tried to use @action from mobX(not mobX-react), but it's no effect there. Mostly all guides for mobx I have found about newer version of it, or maby I'm not understanding somethink. Please help to figure it out.