extraData平台在功能组件中的支柱？

Question

当使用带有FlatList的类组件时，我知道要获得重呈现，需要使用extraData{this.state}。

我使用的是带有钩子的功能组件。我有个州

const [selectedGuests, setSelectedGuests] = useState([]);

和一张平底表

<FlatList
    data={contactsData}
    renderItem={renderItem}
    extraData={selectedGuests}
    keyExtractor={(item, index) => index.toString()}
    >

但是，当我改变州的数组时，什么都不会改变。如果我添加了一个项，但在从数组中删除一个项时，它就会起作用，所以我假设extraData不像我现在所拥有的那样工作。

我试图做的是改变一个项目在FlatList中的背景颜色，以显示它是被选中的。如果我将项id添加到数组中，它就能工作：

<View style={{ other style stuff then.. backgroundColor: selectedGuests.find(k => k === item.id) ? "#ffe5e5" : "#eee"}}

然后在调用的函数中单击一个按钮来选择项。

const addToList = (guestIDnum) => {
  const guestArray = selectedGuests;
  guestArray.push(guestIDnum);
  const mySortedList = guestArray.sort();
  const sortedNoDupes = Array.from(new Set(mySortedList));
  setSelectedGuests(sortedNoDupes);
}

这很管用。删除项目如下所示：

const removeFromList = (guestIDnum) => {
  const guestArray = selectedGuests;
  const itemIndex = guestArray.indexOf(guestIDnum);
  if (itemIndex > -1) {
    guestArray.splice(itemIndex, 1);
    setSelectedGuests(guestArray);
  }
}

虽然我可以在控制台中看到项目正在添加和删除，但颜色只有在添加项目时才会改变，或者如果我删除了一个项目，然后选择一个新的项目，屏幕就会正确地重新呈现。

Answer 1

当您使用const guestArray = selectedGuests;时，意味着将guestArray指向selectedGuests，因此它们指向相同的数组(位置)。当删除一个项时，您实际上是操作selectedGuests然后调用setSelectedGuests(guestArray);，它不会重新呈现，因为数组位置没有改变(这是如何反应更新状态和重呈现，浅比较对象)尝试如下：

​

const removeFromList = (guestIDnum) => {
  // Clone guestArray
  const guestArray = [...selectedGuests];
  const itemIndex = guestArray.indexOf(guestIDnum);
  if (itemIndex > -1) {
    guestArray.splice(itemIndex, 1);
    setSelectedGuests(guestArray);
  }
}

​