javascript - react native 平面列表，从状态中删除元素时无法正确更新

Question

我对 React Native 的 Flatlist 有疑问。我不是 React 专业人士，但我有点了解我的方式。

<FlatList
      data={this.state.rules}
      renderItem={({ item, index}) => (
        <CodeRow
          text={item.text}
          key={index}
          numList={index}
          onTextUpdate={this.updateRules.bind(this)}
          onDeletePress={this.alertDeleteRule.bind(this)}
        />
      )}
      keyExtractor={item => item._id}
    />

当从处于状态的规则数组中删除元素时，它会从数组中正确删除，但在平面列表中以图形方式显示，如果我删除第一个、第二个、最后一个并不重要，它总是从视觉上删除列表中的最后一个元素，但它保留在状态数组中。

deleteRule(numList){
        console.log("Selected Delete: ",numList);
        console.log("antes", this.state.rules);
        let ruleArray = this.state.rules;
        ruleArray.splice(numList, 1);
        console.log("despues", ruleArray);
        this.setState({ rules: ruleArray });   
    }

我怀疑这与组件的按键有关，但我真的被困在这里了。我感谢任何帮助。

Answer 1

尝试将项目的 _id 传递到项目组件的 key 属性中:

<FlatList 
    data={this.state.rules}
    renderItem={({ item, index }) => (
        <CodeRow
            text={item.text}
            key={item._id}
            numList={index}
            onTextUpdate={this.updateRules.bind(this)}
            onDeletePress={this.alertDeleteRule.bind(this)}
        />
    )}
    keyExtractor={item => item._id}
/>