React Native组件未响应Mobx Observable数据变更，FlatList不重新渲染

嘿，我来帮你排查这个FlatList不跟着Mobx Store更新的问题！这种情况我碰到过好多次，大概率是这几个常见原因之一：

1. 组件没被Mobx的observer高阶组件包裹 #

这是最容易踩的坑！Mobx需要明确知道哪些组件要响应状态变化，如果你没有用observer把TripsList组件包裹起来，哪怕Store里的数组已经更新，组件也完全感知不到变化，自然不会重新渲染。

正确的写法应该是这样：

import { observer } from 'mobx-react-lite'; // 如果你用的是类组件，就导入mobx-react里的observer

const TripsList = observer(() => {
  // 组件逻辑，直接从Store获取trips列表
  return <FlatList data={tripStore.trips} {...其他属性} />;
});

没加observer的话，组件只会在初始渲染时取一次数据，之后Store的任何变化都和它无关。

2. Store里的列表不是Mobx可观察数组 #

如果你的Store里的trips是普通JS数组（比如this.trips = []），而不是用Mobx的observable声明的可观察数组，那Mobx根本追踪不到数组的增删改操作。

正确的Store声明方式：

import { observable, action } from 'mobx';

class TripStore {
  // 用@observable标记数组为可观察对象
  @observable trips = [];
  // 或者用observable.array([])，效果一样

  // 修改状态的方法必须用@action装饰，确保在Mobx的动作上下文里执行
  @action
  addNewTrip = (newTrip) => {
    this.trips.push(newTrip);
    // 或者用扩展运算符：this.trips = [...this.trips, newTrip]，只要数组是可观察的就可以
  };
}

要是用普通数组，哪怕你push了新元素，Mobx也不会触发任何更新通知。

3. 修改数组的方式没被Mobx追踪到 #

有时候数组是可观察的，但你用了Mobx无法检测的修改方式，比如：

• 直接通过索引修改元素：this.trips[0] = newTrip（这种方式Mobx默认不追踪，需要用this.trips.replace()或者set方法）
• 没有把修改逻辑放在@action装饰的方法里：Mobx要求状态修改必须在动作上下文里，否则可能出现更新延迟或者不更新的情况。

4. FlatList的data属性断了追踪链 #

比如你在组件里把可观察数组转换成了普通数组（比如const trips = [...tripStore.trips]），再把这个普通数组传给FlatList的data，这样Mobx的追踪就被切断了。应该直接把tripStore.trips传给data——可观察数组在组件里会自动被转换成React能识别的普通数组，同时保持Mobx的追踪能力。

5. 特殊情况：keyExtractor导致局部不更新 #

如果是新增的项没渲染，而不是整个列表没更新，那可能是keyExtractor返回的key重复或者没有变化。FlatList依赖唯一key来识别项的变化，所以要确保每个项的key是唯一且能反映数据更新的。

比如：

<FlatList
  data={tripStore.trips}
  keyExtractor={(item) => item.id.toString()} // 确保id是唯一的，新增项要有全新的id
  renderItem={({ item }) => <TripItem item={item} />}
/>

你可以先检查前两点（observer包裹组件、可观察数组声明），这两个是最常见的元凶。如果还是解决不了，把你的TripsList组件和Store的具体代码贴出来，我可以帮你更精准地排查！

内容的提问来源于stack exchange，提问作者user3150153