Question

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

现在我遇到一个问题，从服务器获取数据后，平面列表不更新/不调用renderItem。我尝试设置extraData道具（像其他建议stackoverflow，document一样），并确保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状态。这似乎不起作用，因为段控制使渲染了旧的选项卡内容。因此，我现在的解决方案是处理道具更改（当选项卡内容更改时）并更新Segment Control的选项卡内容状态。

React Native Flatlist不会重新提交

2 个答案: