React Native FlatList状态更新报错：undefined is not an object问题咨询

你的错误和FlatList对键的顺序要求完全无关，核心问题出在数据处理逻辑上：

1. 数组索引误用导致undefined #

this.state.posts是数组，但你在handleLikePost里用this.state.posts[postid]获取项——当postid是"44"时，数组只有5个元素（索引0-4），不存在索引为44的项，所以取到undefined，后续解构liked和likeCount自然抛出错误。之前的postid是"0""1""2""3"，刚好和数组索引重合，只是侥幸没报错，本质是错误写法。

2. 错误将数组转为对象 #

setState时你把原本的数组posts改成了对象：

posts: {
  ...this.state.posts,
  [postid]: newPost,
}

这彻底破坏了数据结构，虽然FlatList用Object.values还能勉强渲染，但后续操作会完全混乱。

3. keyExtractor参数误用 #

keyExtractor的第二个参数是index，不是postid，你当前写法keyExtractor={(item, postid) => postid}其实是把索引当作key，会导致FlatList的项复用逻辑出错，应该用item的唯一标识item.postid作为key。

4. 字符串类型liked的处理错误 #

你的liked字段是字符串"true"/"false"，直接!liked会得到false（非空字符串都是truthy），需要先转成布尔值再取反。

修复后的代码 #

Post组件修改 #

修正shouldComponentUpdate中likeCount的比较逻辑（转成数字再比较）：

class Post extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    const { liked, likeCount } = nextProps;
    const { liked: oldLiked, likeCount: oldLikeCount } = this.props;

    // 转成布尔值和数字再做比较
    const newLiked = liked === "true";
    const oldLikedBool = oldLiked === "true";
    const newLikeCount = Number(likeCount);
    const oldLikeCountNum = Number(oldLikeCount);

    return newLiked !== oldLikedBool || newLikeCount !== oldLikeCountNum;
  }

  render() {
    const isLiked = this.props.liked === "true";
    return (
      <View key={this.props.postid} style={styles.container}>
        <TouchableOpacity
          onPress={() => this.props.onPressLike(this.props.postid)}
        >
          <AntDesign
            name="like2"
            size={20}
            color={isLiked ? "royalblue" : "black"}
          />
        </TouchableOpacity>
        <Text> {this.props.postid}</Text>
      </View>
    );
  }
}

Home组件修改 #

重点修复handleLikePost和keyExtractor：

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [
        // 原posts数组内容保持不变
        {
          postid: "0",
          date: "115255668551",
          message: "My Post 1 was 4",
          uid: "52YgRFw4jWhYL5ulK11slBv7e583xa",
          commentCount: "1",
          likeCount: "1",
          liked: "true",
        },
        {
          postid: "1",
          date: "215255668551",
          message: "My Post 2",
          uid: "52YgRFw4jWhYL5ulK11slBv7e583xb",
          commentCount: "1",
          likeCount: "1",
          liked: "false",
        },
        {
          postid: "2",
          date: "315255668551",
          message: "My Post 3",
          uid: "52YgRFw4jWhYL5ulK11slBv7e583xc",
          commentCount: "1",
          likeCount: "1",
          liked: "true",
        },
        {
          postid: "3",
          date: "415255668551",
          message: "My Post 4",
          uid: "52YgRFw4jWhYL5ulK11slBv7e583xd",
          commentCount: "1",
          likeCount: "1",
          liked: "false",
        },
        {
          postid: "44",
          date: "515255668551",
          message: "My Post 44 does not work!!!!!!!!!!!!!!!!!",
          uid: "52YgRFw4jWhYL5ulK11slBv7e583xe",
          commentCount: "1",
          likeCount: "1",
          liked: "false",
        },
      ],
      postsThisIsWorking: [
        // 原postsThisIsWorking数组内容保持不变
      ],
    };
  }

  renderItem = ({ item, index }) => {
    const { date, message, uid, postid, liked } = item;
    return (
      <Post
        postid={postid}
        liked={liked}
        date={date}
        message={message}
        uid={uid}
        onPressLike={this.handleLikePost}
      />
    );
  };

  handleLikePost = (postid) => {
    // 遍历数组找到对应postid的项并更新
    const updatedPosts = this.state.posts.map(post => {
      if (post.postid === postid) {
        const isLiked = post.liked === "true";
        const likeCount = Number(post.likeCount);
        return {
          ...post,
          liked: isLiked ? "false" : "true",
          likeCount: isLiked ? (likeCount - 1).toString() : (likeCount + 1).toString()
        };
      }
      return post;
    });

    this.setState({
      posts: updatedPosts
    });
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={this.state.posts} {/* 直接使用数组，无需Object.values转换 */}
          renderItem={this.renderItem}
          keyExtractor={(item) => item.postid} {/* 用postid作为唯一标识 */}
        />
      </View>
    );
  }
}

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