FlatList Mobx ReactNative 缺少计算选项：get

Question

当我单击添加项目按钮时，我会看到添加了项目但视图未重新呈现的日志。

我的商店：

import {observable, action, computed} from 'mobx';

export default class ObservableItemStore {
  @observable items = ["Item A", "Item B"];

  @computed get myItems() {
    return this.items;
  }

  @action addItem(item)) {
    console.log("Adding to" + this.items);
    this.items.push(item);
  }
}

import React, {Component} from 'react';
import {Button, FlatList, StyleSheet, Text, View} from 'react-native';
import { observer } from 'mobx-react';
import { Observer } from 'mobx-react/native';
import { Items } from '../../stores';
interface Props {}

@observer
class List extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Button
          title="Add Item"
          onPress={() => {
            Items.addItem("Foo");
          }}
        />
        <Observer>{() => {
          return <FlatList
            data={ Items.items }
            renderItem={({item}) => <Text>{item}</Text>}
          />
        }}
        </Observer>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

export default List;

为什么视图没有重新渲染？

Answer 1

您应该在渲染中使用数组属性之一（items.slice()、items.map()、items.length 等）。

https://mobx.js.org/best/react.html#incorrect-use-an-observable-but-without-accessing-any-of-its-properties