javascript - React Native 可重用组件的设置状态问题

Question

我尝试制作一张可重复使用的卡片，可以在其中增加不同元素的数量。我尝试了很多方法，但都没能成功。我使用平面列表来显示每张卡片。这是卡片:

export default function Card(props) {
  return (
    <View style={styles.card}>
      <Text>{props.children}</Text>
      <TouchableOpacity
        onPress={() => {
          console.log(props.number);
          props.set(props.number+1)
        }}
      >
        <FontAwesome size={30} name="plus" color="red" />
      </TouchableOpacity>
    </View>
  );
}

这是我使用平面列表的地方:

export default function User() {
  const [objects, setObjects] = useState([
    {
      id: "1",
      name: "pants",
      quantity: 0,
    },
    {
      id: "2",
      name: "t-shirt",
      quantity: 0,
    },
  ]);
  return (
    <SafeAreaView>
      <FlatList

        data={objects}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Card number={item.quantity} set = {setObjects}>
            {item.name}
          </Card>
        )}
      />
    </SafeAreaView>
  );
}

Answer 1

这行得通吗？像这样调用 props.set:

props.set({
  ...props.item,
  quanitity: props.item.quantity + 1,
})

和卡:

<Card
  item={item}
  set={item => setObjects(objs => {
    for (const obj of objs) {
      if (obj.id === item.id) {
        obj.quantity++
        break
      }
    }
    return objs
  }}
>

如果可行，我仍然建议进行一些重构:

<Card
  item={item}
  add={() => setObjects(objs => {
    for (const obj of objs) {
      if (obj.id === item.id) {
        obj.quantity++
        break
      }
    }
    return objs
  }}
>

和

<TouchableOpacity onPress={props.add}>