React Native Flatlist 不重新渲染

Question

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

现在我遇到一个问题，即从服务器获取数据后平面列表不 update/not 调用 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>
  )  
 }
}

Answer 1

将下面的代码替换为

_data = nextProps.wastetypes[index]

这个

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

Answer 2

在深入研究问题并将我的列表与段控制分开后，我发现问题出在段控制上。我所有的列表组件都属于 Segment Control 的 tabContent 状态。它似乎不起作用，因为段控制保持呈现旧选项卡内容。 So my solution now is that handling props change (when tab contents change) and update tab contents state of Segment Control.

React Native Flatlist 不重新渲染

React Native Flatlist not rerender

react-native

redux-saga

react-redux

react-native-flatlist