删除数据时平面列表不会重新呈现

Question

当数据从 sortedData prop 移除到 flatlist 时，我的 react-native flatlist 没有重新渲染。我尝试使用 extraData 道具强制重新渲染，但这没有用。当我删除元素时，出现空白行。

handleRemove = (title) => {
    // const start = this.state.people.slice(0, index);
    // const end = this.state.people.slice(index + 1);
    // this.setState({
    //   people: start.concat(end),
    // });
    const filteredData = this.state.sortedData.filter(
      (item) => item.title !== title
    );
    this.setState({ sortedData: filteredData });
  };

  render() {
    const { sortedData } = this.state;

    return (
      <FlatList
        data={sortedData}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => (
          <LeaderboardEntry
            song={item}
            handler={this.handler}
            onRemove={() => this.handleRemove(item.title)}
          />
        )}
      />
    );
  }

Answer 1

你应该像下面那样做

 var newSortedData = [...this.state.sortedData];
    newSortedData.splice(index, 1);
    this.setState({
      sortedData: newSortedData,
    });

原因是即使你正在更新状态，它指向状态中的同一个数组，所以你需要使用展开运算符，它会创建一个新数组，这反过来会导致重新渲染。

更新使用过滤器删除项目您的平面列表应更改为

onRemove={() => this.handleRemove(item.title,index)}

句柄移除函数的逻辑

handleRemove = (title,index) => {
    const filteredData = this.state.sortedData.filter(
      (item,index) => item.index !== in
    );
    this.setState({ sortedData: filteredData });
  };

这里的title参数完全不需要，你也可以去掉。

删除数据时平面列表不会重新呈现

Flatlist not re-rendering when data is removed

reactjs

react-native

react-native-flatlist