Question

我有一个使用mobx的RN（0.44.2）FlatList（3.1.10）应用。我基本上跟随https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

当使用我自己的商店时，与示例相反，我必须使用toJS()才能使FlastList呈现

    // renders list
    <FlatList
      data={this.props.giphyStore.images.toJS()}
      keyExtractor={(_, i) => i}
      renderItem={({ item }) => <Text>found the data</Text>}
    />

    // does not render list
    <FlatList
      data={this.props.giphyStore.images}
      keyExtractor={(_, i) => i}
      renderItem={({ item }) => <Text>did not find the data</Text>}
    />

我真的很难弄清楚为什么在某些情况下可能需要toJS()而不是其他情况。

我的商店正在设置像这样可观察的图像

async getImageList(query: string) {
  try {
    const requestURL = `${constants.GIPHY_ENDPOINT}${query}`
    const response = await axios.get(requestURL);
    const imgs = response.data.data.map((item) => {
      return { id: item.id, url: item.images.downsized.url }
    })
    this.images.replace(imgs)
  } catch (e) {
  }
}

作为一个后续问题，我不确定为什么我需要执行以下this.images.replace(imgs)，因为在教程中他只是this.tracks = response.data.tracks.items触发了observable就好了。

如果有人有建议，我会非常感激。

Answer 1

这是因为 mobx的数组是对象，X = E(:, 3:4); % 3 is size(A,2)+1, numel(3:4) is size(B,2)或反应原生中的数据需要一个数组。您可以在here和there中详细了解相关信息。

Also...，FlatList返回浅拷贝;一个具有相同内容的新数组，而slice也会转换数组中的值（但前提是它们是可观察的）。

Answer 2

这个问题有点陈旧，但值得一提的是MobX默认只跟踪渲染函数，而FlatList接受渲染回调并调用它们。（例如renderItem={this.renderItem}）

为了在不刷新整个列表的情况下更新项目，请使用<Observer>包装渲染回调的结果。

请参阅Understanding what MobX reacts to

React Native mobx绑定到FlatList不起作用

2 个答案: