反应本地mobx绑定到FlatList不起作用

问题描述

我有一个使用FlatList的RN(0.44.2)mobx(3.1.10)应用程序.我基本上是在 https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

I have a RN (0.44.2) mobx (3.1.10) app which uses a FlatList. I'm basically following https://blog.callstack.io/write-react-native-apps-in-2017-style-with-mobx-e2dffc209fcb

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

When using my own store, opposed to the examples, I'm having to use toJS() in order to get the FlastList to render

    // 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()的原因.

I'm really struggling to figure out why toJS() might be needed in some cases and not others.

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

My store is setting the images observable like this

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一样，它触发了可观察的效果.

As a follow up question, I'm not sure why I need to do the following this.images.replace(imgs) where as in the tutorial he simply did does this.tracks = response.data.tracks.items which triggers the observable just fine.

如果有人提出建议，我将非常感谢.

If anyone has suggestions, I would very much appreciate it.

推荐答案

这是因为 mobx的数组是对象，并且期望FlatList或 react native 中的数据数组.您可以在此处和那里.

This is because mobx's arrays are objects and the data in FlatList or in react native expects an array. You can read more about it in here and there.

也... ，slice返回一个浅复制;一个具有相同内容的新数组，而toJS还将转换数组中的值(但仅当它们是可观察的时).

Also..., slice returns a shallow copy; a new array with the same contents, while toJS also converts the values inside the array (but only if they are observables).

这篇关于反应本地mobx绑定到FlatList不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！