如何更新状态反应本地?

Question

我试图创建一个计数器应用程序，其中某些卡或+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);
const onPressCard = () =>{
setCount + 1
}
return (
<View style={styles.app}>
<CardCount useState={currentCount}/>
<View style={styles.cards} onPress={onPressCard()}>
{cards.map((index) =>(<Card item={index} />))}
</View>
</View>
);
}

我正在使用的自定义组件。这个组件是计数改变的地方。

export const CardCount = ({useState}) => {
return (
<Text style={styles.count}>{useState}</Text>
)
}

如何使用对象卡更新状态?

感谢

Answer 1

即使在作为框架的React之外，或者作为语言的JavaScript之外，这个语句本身也没有任何作用:

setCount + 1

即使生成结果，也不会对该结果做任何操作。

在本例中，setCount是函数。调用函数并传递实参/形参:

setCount(currentCount + 1);

Answer 2

你就像在正常反应中那样使用它。

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 [count, setCount] = useState(0);
const onPressCard = () =>{
setCount((currentCount) => currentCount + 1);
}
return (
<View style={styles.app}>
<CardCount count={count}/>
<View style={styles.cards} onPress={onPressCard()}>
{cards.map((index) =>(<Card item={index} />))}
</View>
</View>
);
}

export const CardCount = ({count}) => {
return (
<Text style={styles.count}>{count}</Text>
)
}