javascript - 功能组件中的 extraData flatlist Prop ？

Question

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

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

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