如何在 react-Native 中的平面列表中使用 extraData

Question

我正在制作評論部分，我有一個包含 2 條現有評論的數組。 當用戶撰寫評論並按下發布按鈕時，帖子將使用解構添加到數組中。 這在我執行數組的console.log()時有效，我看到正在插入新數據，但我的 flatList 沒有更新，仍然只顯示我以前存在的 2 個評論。

我發現我可以通過在平面列表中使用 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",
    },
  ];

解構按下按鈕時調用的 function：

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

Answer 1

當您需要更改數據以導致在組件中重新呈現時，請使用 state。 代替

  let Reviews = [
    ...
  ]
  ...
  Reviews = // etc

使用 useState 掛鈎定義並設置您的 state。

  const existingReviews = [
    // your existing reviews
  ]; 
  const [reviews, setReviews] = useState(existingReviews);

  // to set
  setReviews(modifiedObj);

在文檔中查看有關 state 的更多信息。