為可重用組件 React Native 設置 State 問題

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 ：

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