useState 不使用组件更新状态

Question

我正在尝试在 React.js 上创建简单的计数器应用程序。我的代码如下所示：

反页

import React, { useState } from 'react';
import {Button} from '../components/Button/Button';

export const CounterPage = () => {
    const [counter, setCounter ] = useState(0);
    return (
        <>
            <div className="container" style = {{textAlign : 'center'}}>
                <h2>Counter Page</h2>
                <h3>{counter}</h3>
                <Button onClick = {() => setCounter(0)} value = 'reset' />
                <Button onClick = {() => setCounter(counter - 1)} value = '-'/>
                <Button onClick = {() => setCounter(counter + 1)}  value = '+'/> 
            </div>
        </>
    )
}

按钮组件

import React from 'react';
import styles from './Button.module.css';
export const Button = (props) => {
    return (
        <button 
            className = {props.value === '+' ? styles.addButton : styles.subButton} 
            type = "button"
        >{props.value}</button>
    )
}

我使用 useState 挂钩来更新状态，但它不会更新。但是如果我只使用

 <button onClick = {() => setCounter(0)}>reset</button>
  <button onClick = {() => setCounter(counter - 1)}>-</button>
  <button onClick = {() => setCounter(counter + 1)}>+</button>

而不是

<Button onClick = {() => setCounter(0)} value = 'reset' />
  <Button onClick = {() => setCounter(counter - 1)} value = '-'/>
  <Button onClick = {() => setCounter(counter + 1)}  value = '+'/>

有效。你能解释一下为什么吗？提前致谢。

Answer 1

由于您制作了自己的组件，因此您的 <Button> 组件还需要接受 prop 的 onClick：

import React from 'react';
import styles from './Button.module.css';
export const Button = (props) => {
    return (
        <button 
            className = {props.value === '+' ? styles.addButton : styles.subButton} 
            type = "button"
            onClick={props.onClick}
        >{props.value}</button>
    )
}

就目前而言，在您的第二个代码块中，onClick 没有绑定到任何东西......它只是一个永远不会被利用的道具，这就是它不起作用的原因。您使用 useState 和 setCounter 的方式都是正确的。

Answer 2

您可以使用的另一种干净的方法是传播道具并添加到按钮，这样您的 Button 组件可配置性更高。

前：

.....
<Button onClick = {() => setCounter(0)} className={styles.addButton}  />
<Button onClick = {() => setCounter(counter - 1)} className={styles.subButton} />
....

并在 Button 组件中

export const Button = ({value, ...buttonProps}) => {
    return (
        <button 
            {...buttonProps}, // here use the spread operator
            type = "button"
        >{value}</button>
    )
}

example here

useState 不使用组件更新状态

useState doesn't update the state with component

reactjs

react-hooks

use-state