为可重用组件 React Native 设置 State 问题

Question

I try to make a reusable card where I can increment quantities for different items. I tried in many ways but I couldn't make it work. I use a flatlist to show every card. This is the card:

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

This is where I use the flatlist:

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

Will this work? Call props.set like this:

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

And Card :

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

If that works, I'd still suggest some refactoring:

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

and

<TouchableOpacity onPress={props.add}>