代码之家 › 专栏 › 技术社区 › ubermo

如何在React本机自定义组件中使用状态?

react-native reactjs javascript

ubermo · 技术社区 · 2 年前

我正在尝试创建一个计数器应用程序,其中某些卡要么+1要么-1。当点击键盘上的每个数字时,计数器递增+1或-1。到目前为止,我已经创建了一个自定义组件,并尝试使用状态来

export default function App() {

  const cards = [
    { card: "A", count: -1 },
    { card: "K", count: -1 },
    { card: "Q", count: -1 },
    { card: "J", count: -1 },
    { card: 10, count: -1 },
    { card: 9, count: 0 },
    { card: 8, count: 0 },
    { card: 7, count: 0 },
    { card: 6, count: 1 },
    { card: 5, count: 1 },
    { card: 4, count: 1 },
    { card: 3, count: 1 },
    { card: 2, count: 1 },
  ];


  const [currentCount, setCount] = useState(0); //Count <<

  return (
    <View style={styles.app}>
      <CardCount useState={currentCount}/> // Custom component <<
      <View style={styles.cards}>
      {cards.map((index) =>(<Card item={index}/>))}
      </View>
    </View>
  );
}

The custom component 

export const CardCount = ({currentCount}) => {
  return (
    <Text>{currentCount}</Text>
  )
}

我没有看到任何结果?除非我用错了状态

2 回复 | 直到 2 年前

Secret Keeper 2 年前

export const CardCount = ({useState}) => {
  return (
    <Text>{useState}</Text>
  )
}

Turtle 2 年前

<CardCount useState={currentCount}/>

这行代码表示CardCount组件道具由一个具有useState属性的对象组成。

export const CardCount = ({currentCount}) => {

您实际期望的是currentCount->您必须编写currentCount={currentCount},而不是useState={currentCount};第一个currentCount是指CardCount组件期望作为道具的属性。第二个currentCount是指父组件中的状态变量。

这将始终显示默认值0。

callback ,将此函数作为道具添加到卡中,然后在卡上创建onClick事件,该事件调用具有某些值的道具回调。

推荐文章

user19476497 · 如何使用useState修改数组以使其成为React中的常数

2 年前

Muhammad Ashraf · 反应:过滤从具有特定键的对象数组中获取值,并将结果分组到数组中

2 年前

John · 如何确定Javascript自引用循环是否完成[重复]

2 年前