删除数组中的最后一个元素后,React Native FlatList将不会重新呈现

时间:2019-01-03 01:01:45

标签: react-native react-native-flatlist

我正在尝试删除FlatList中的项目,并且所有项目都可以删除,但是只有最后一项保留在列表中而不重新呈现。

我在react-native-collapsible / Accordion中使用FlatList,并尝试通过Redux动作删除项目。当我在slpice之后执行console.log状态数据时,似乎删除了数组中的所有元素,但是即使我通过单击它的相应部分来重新显示“手风琴”列表,数组中的最后一项仍会显示在列表中。

FlatList

       <FlatList
      data={section.data}
      extraData={section.data}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item, index }) => (
          <Chore
          toDetail={() => 
          this.props.navigation.navigate('Details', {
            itemId: index,
            categoryId: item.categoryId
          })}
            item={item.desc}
            categoryId={item.categoryId}
            assignedName= {item.assignedName}
            keyExtractor={this._keyExtractor} 
            index={index} 
            parentFlatList={this} >
          </Chore>
      )}
    />

删除函数(src / components / Chore.js)

_handleDelete = () => {
const { dispatch } = this.props;
const deletingCategoryId = this.props.categoryId;
const deletingIndex = this.props.index;
const action = {
type: 'DELETE_CHORE',
deletingCategoryId: deletingCategoryId,
deletingIndex: deletingIndex
}
dispatch(action);
this.setState({activeRowKey: 1})
}

this.setState({activeRowKey:1})是我尝试使其重新呈现该项目但不起作用。

Reducer(src / store / reducers / chores.js)

case DELETE_CHORE:
const {deletingCategoryId, deletingIndex} = action;
newState = state;
newState.choreList[deletingCategoryId].data.splice(deletingIndex, 1);
return newState;

数据结构(src / store / reducers / chores.js)

choreList: [
  {
title: "Sunday",
data: [
  {
    desc: "Laundry",
    assignedName: "A",
    priority: "High",
    note: "Use dry sheet",
    categoryId: 0
  },
  {
    desc: "Doing the dishes",
    assignedName: "B",
    priority: "Medium",
    note: "Use pods",
    categoryId: 0
  }
 ]
},

当您单击“手风琴”列表的每个部分时,它应该重新渲染列表中的所有元素。

GitHub repo of my project

0 个答案:

没有答案