删除数据时不重新渲染平面列表

Question

当数据从 sortedData 属性删除到平面列表时，我的 react-native 平面列表不会重新呈现。我尝试使用 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参数，你也可以去掉它。