React Native中FlatList用extraData仍不更新的问题排查

我正在开发一个评论区，初始有包含2条评论的Reviews数组。当用户撰写评论并点击发布按钮时，通过解构将新评论添加到数组中，console.log显示数组已成功更新，但FlatList仍仅显示原有2条评论。我尝试在FlatList中使用extraData={Reviews}来解决，但问题依旧，请问我哪里出错了？

初始数组 #

let Reviews = [
    {
      title: "I love F1",
      name: "Tibo Mertens",
      review:
        "This car may have a legendary driver on their team, but unfortunately, their car doesn't live up to his skills",
    },
    {
      title: "F1 is awesome",
      name: "Quintt Adam",
      review:
        "This car is extremely middle of the pack when it comes to the best car on the grid of 2022",
    },
  ];

发布按钮触发的函数 #

const addReview = (title, name, review) => {
    const newReview = { title: title, name: name, review: review };

    const modifiedObj = {
      title: newReview.title,
      name: newReview.name,
      review: newReview.review,
    };

    Reviews = [modifiedObj, ...Reviews];

    console.log(Reviews);
  };

FlatList代码 #

<FlatList
          data={Reviews}
          extraData={Reviews}
          renderItem={({ item }) => (
            <View style={styles.listContainer}>
              <View style={styles.reviewContainer}>
                <Text style={styles.reviewTitle}>{item.title}</Text>
                <Text style={styles.review}>{item.review}</Text>
                <Text style={styles.reviewName}>- {item.name}</Text>
              </View>
            </View>
          )}
        />

问题原因及解决方法 #

• 核心问题：你用let声明的普通数组不是React Native的响应式状态，组件无法感知到它的变化。即便你手动更新了数组内容，也不会触发组件重渲染，导致FlatList界面不更新。extraData只对响应式状态生效，普通变量的变化无法被它检测到。
• 修复步骤：
  1. 用useState将评论数组转为响应式状态：

     import { useState } from 'react';
     
     const [reviews, setReviews] = useState([
         {
           title: "I love F1",
           name: "Tibo Mertens",
           review:
             "This car may have a legendary driver on their team, but unfortunately, their car doesn't live up to his skills",
         },
         {
           title: "F1 is awesome",
           name: "Quintt Adam",
           review:
             "This car is extremely middle of the pack when it comes to the best car on the grid of 2022",
         },
       ]);
     

  2. 修改addReview函数，通过setReviews更新状态（必须生成新数组引用，不能直接修改原数组）：

     const addReview = (title, name, review) => {
         const newReview = { title, name, review };
         // 使用函数式更新确保拿到最新的状态值
         setReviews(prevReviews => [newReview, ...prevReviews]);
     };
     

  3. 更新FlatList的数据源为状态变量：

     <FlatList
           data={reviews}
           renderItem={({ item }) => (
             <View style={styles.listContainer}>
               <View style={styles.reviewContainer}>
                 <Text style={styles.reviewTitle}>{item.title}</Text>
                 <Text style={styles.review}>{item.review}</Text>
                 <Text style={styles.reviewName}>- {item.name}</Text>
               </View>
             </View>
           )}
         />
     

  此时无需再设置extraData，因为data本身就是响应式状态，状态更新时FlatList会自动重新渲染。

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