反應本機平面列表，從狀態刪除元素時未正確更新

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}
/>