呈现的FlatList项内的FlatList数据修改

Question

我目前正在努力使这个“项目”发挥作用。

演示img

https://codesandbox.io/s/flatlisttesting-eiw0x

预期行为：

( a)单击FlatList元素应更改其状态，从而检查CheckBox

( b)单击"Select“TouchableOpacity将导致选中所有项目的复选框，然后再次单击TouchableOpacity应取消选中复选框

结果：

( a)按计划进行工作

( b)当我单击一个元素(检查CheckBox)，然后尝试按下TouchableOpacity时，确实选中了CheckBoxes，但当我再次单击TouchableOpacity时，它只取消了以前没有检查过的CheckBoxes (选中->未选中)。

有人能说明一下这个问题吗？

提前感谢

Answer 1

通常情况下，在组件中保留一个单独的状态，并为单个数据源使用另一个外部数据源并不是一个好主意。在这里，您唯一的数据源是数组。因此，为了获得更好的约定，FlatList的唯一来源应该是您传递的数据。因此，如果删除CustomItem组件中的额外状态操作，它将按预期工作：

import { TouchableOpacity, View, Text, CheckBox } from "react-native";
import { useState } from "react";

export default function CustomItem({
  item,
  flatListData,
  setFlatListData
}) {
  function handlePress() {
    setFlatListData(
      flatListData.map((element) => {
        if (item.id === element.id) {
          return { ...item, isDone: !item.isDone };
        }
        return element;
      })
    );
  }

  return (
    <TouchableOpacity onPress={handlePress} style={{ flexDirection: "row" }}>
      <Text style={{ marginRight: 10 }}>{item.text}</Text>
      <CheckBox value={item.isDone} onPress={handlePress} />
      <Text>{JSON.stringify(item)}</Text>
    </TouchableOpacity>
  );
}

通过这样做，CustomItem将只依赖于数据源，而不需要自身内部额外的条件呈现。

不过，我也有一个建议。当前，Select按钮的工作方式不是select all，而是像切换按钮一样工作。我建议您修改它，以便如果没有选择所有项，它将选择所有，如果所有项都被选中，则只取消选中所有项。当然，这取决于您，但是名称和功能看起来并不一致。