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

功能组件中的extraData Flatlist道具？

1 个答案: