React Native Flatlist 不重新渲染答案

【问题标题】：React Native Flatlist not rerenderReact Native Flatlist 不重新渲染
【发布时间】：2018-12-27 02:01:08
【问题描述】：

我在我的 React Native 应用程序中使用 Flatlist。我的应用程序将从服务器获取数据并显示在 FlatList 上。 Props/State 通过 Redux 和 Redux-saga 更新

现在我遇到一个问题，即从服务器获取数据后平面列表不更新/不调用 renderItem。我尝试设置 extraData 道具（像其他人建议 *、document）并确保 Flatlist 的大小大于零但没有运气。我还尝试设置一些预定义的数据，flatlist 完美地显示它，但在新数据到来后不会更新。我确实检查了数据更新后是否调用了 _listView 函数，但没有调用 _listViewRenderItem。

以下是我的代码片段。我将非常感谢任何帮助。谢谢

componentWillReceiveProps(nextProps) {
   var index = nextProps.bintype_ids.indexOf(nextProps.bin.id)
   if (index != -1) {
      _data = nextProps.wastetypes[index]
   } else {
      _data = { allow : [], not_allow : []}
   }

   const newState = {
      index : this.state.index + 1,
      change : !this.state.change,
      wastetypes : _data
   }

   this.setState(newState)
}

_listViewRenderItem(item) {
   return (
     <BinGuideListItem item={item} />
   )
}

_listView(data) {

  return (
      <FlatList style={css.segmentList}
          data={data}
          renderItem={({ item }) => {this._listViewRenderItem(item)}}
          keyExtractor={(item) => item.id}
          ItemSeparatorComponent={this._renderSeparator}
          extraData = {this.state}
      />
  );
}

render(){
  return (
    <View>
      <SegmentControl
         values={['Allow', 'Not Allowed']}
         tabContents={[
            this._listView(this.state.wastetypes.allow),
            this._listView(this.state.wastetypes.not_allow),    
         ]}
         style={{
            container: css.segmentContainer,
            contentContainer : css.contentContainer,
            tabText: css.segmentTabText,
            tab: css.segmentTab,
         }}
         colorsByTab={[
            common.COLOR_BIN_GUIDE_ALLOWED,
            common.COLOR_BIN_GUIDE_NOT_ALLOWED
         ]}
         borderRadius={0.1}
      />
    </View>
  )  
 }
}

【问题讨论】：

你检查data的长度了吗？
我检查过了。数据没问题。我还将数据从服务器复制到硬编码数据和 Flatlist 完美呈现
您的data 是有效的 json/array 吗？如果可能请创建一个代码沙箱codesandbox.io
数据传递到平面列表将是这样的：[{"title":"Lorem ipsum dolor 2","id":"5","bintype_id":"1","wastetype_id":"2","is_allow":"1"},{"title":"Lorem ipsum dolor 3","id":"6","bintype_id":"1","wastetype_id":"3","is_allow":"1"},{"title":"Lorem ipsum dolor 4","id":"7","bintype_id":"1","wastetype_id":"4","is_allow":"1"}]
而不是this._listViewRenderItem(item)，你能不能只渲染item.title并检查它是否有效

标签： react-native react-redux redux-saga react-native-flatlist

【解决方案1】：

在深入研究问题并将列表与段控制分开后，我发现问题依赖于段控制。我所有的列表组件都属于 Segment Control 的 tabContent 状态。这似乎不起作用，因为段控制会保持呈现旧的选项卡内容。因此，我的解决方案现在是处理道具更改（当制表符更改时）和更新段控件的选项卡内容状态。

【讨论】：

【解决方案2】：

将下面的代码替换为

_data = nextProps.wastetypes[index]

这个

_data = JSON.parse(JSON.stringify( nextProps.wastetypes[index]));

【讨论】：