向React Native的FlatList添加数据时列表被清空的问题排查

嘿，我帮你找到了两个导致问题的关键原因，咱们一步步来理清楚：

1. 核心bug：setState时错误嵌套数组 #

你的addElement函数里，创建newArray的逻辑是对的（用展开运算符复制原数组并追加新元素），但更新state的时候多套了一层数组：

// 错误写法
this.setState({ initialElements: [newArray] });

newArray本身已经是一个数组，[newArray]会把它变成二维数组（比如[[{id:"0"}, {id:"1"}, {id:"2"}]]），而FlatList只能处理一维数组的数据源，所以它找不到可渲染的item，看起来就像列表被清空了。

正确的写法应该直接把newArray赋值给initialElements：

// 正确写法
this.setState({ initialElements: newArray });

2. FlatList的key设置错误（导致警告） #

你现在给FlatList写的key={(item) => item.id}是无效的，FlatList需要用**keyExtractor属性**来指定每个item的唯一key，这也是你收到警告的原因。修正方式：

<FlatList
  style={styles.listStyle}
  keyExtractor={(item) => item.id} // 替换原来的key属性
  data={exampleState}
  renderItem={(item) => <Text>{item.item.text}</Text>}
/>

额外优化建议 #

把addElement函数从render方法里移出来，放在类的原型方法里，避免每次组件渲染都重新创建这个函数：

class App extends Component {
  state = {
    counter: 0,
    initialElements: [
      { id: "0", text: "Object 1" },
      { id: "1", text: "Object 2" },
    ],
  };

  // 把addElement移到这里
  addElement = () => {
    let newArray = [...this.state.initialElements, { id: "2", text: "Object 3" }];
    this.setState({ initialElements: newArray });
  };

  render() {
    // ... 剩下的render代码
  }
}

修正后的完整代码 #

import React, { Component } from "react";
import { Text, View, StyleSheet, Button, FlatList } from "react-native";
class App extends Component {
  state = {
    counter: 0,
    initialElements: [
      { id: "0", text: "Object 1" },
      { id: "1", text: "Object 2" },
    ],
  };

  addElement = () => {
    let newArray = [...this.state.initialElements, { id: "2", text: "Object 3" }];
    this.setState({ initialElements: newArray });
  };

  render() {
    const currentCounter = this.state.counter;
    const exampleState = this.state.initialElements;

    return (
      <View style={styles.container}>
        <View style={styles.counter}>
          <Text style={styles.textStyle}>{currentCounter}</Text>
        </View>
        <View style={styles.deleteButton}>
          <Button
            title="Hello"
            onPress={() =>
              this.setState({
                counter: currentCounter + 1,
              })
            }
          ></Button>
          <View style={styles.space}></View>
          <Button title="Delete" onPress={this.addElement}></Button>
        </View>
        <FlatList
          style={styles.listStyle}
          keyExtractor={(item) => item.id}
          data={exampleState}
          renderItem={(item) => <Text>{item.item.text}</Text>}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    justifyContent: "center",
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
  },
  counter: {
    flexDirection: "row",
    justifyContent: "center",
  },
  deleteButton: {
    flexDirection: "row",
    margin: 5,
    marginTop: 100,
  },
  space: {
    width: 5,
    height: 5,
  },
  textStyle: {
    margin: 80,
    fontSize: 100,
  },
  listStyle: {
    flexDirection: "column",
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});
export default App;

这样修改后，点击"Delete"按钮，FlatList就会正确显示Object 1、Object 2、Object 3，同时警告也会消失。

内容的提问来源于stack exchange，提问作者Blnpwr