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

我尝试制作可重复使用的卡，在其中可以增加不同项目的数量。
我尝试了很多方法，但是无法正常工作。
我使用清单来显示每张卡。
这是卡：

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

最佳答案

这样行吗？像这样调用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}>

关于javascript - 可重用组件React Native的设置状态问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61194062/