功能组件中的 extraData flatlist 道具？

Question

当使用带有 FlatList 的类组件时，我知道要重新渲染您需要使用 extraData-{this.state}

我正在使用带有 Hook 的功能组件。我有一个状态

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);，它不会重新渲染，因为数组位置没有改变（这是 React 更新状态和重新渲染，浅比较对象的方式）试试这个：

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