return 语句中的三元运算符在 React useState Hook 中不起作用

Question

我试图从业务逻辑中理解和重构我的框架代码，但我对为什么事情不起作用感到困惑。目前，我已经设法使用 useState 挂钩在反应中创建了一个简单的计数器。

我想将代码分成几部分，以便将来我可以在其他地方使用它们并保持我的代码整洁。我遇到的问题是我的三元运算符似乎没有在重构代码中工作，我不确定为什么。现在我只尝试重做我的增量值但是这不再有效我已经注释掉旧代码作为参考。

如果有人能告诉我我做错了什么，那将是最有帮助的。谢谢。

import React, {useState} from 'react';

function Counter ()  {

    const shopProps = {
        quantity: 0,
        message: null,
        max: 10,
        min: 0
    }


    const [state, setState] = useState(shopProps)

    // this is the new function but the ternary operation no longer works.

    function increase({previousQuantity, max}) {
        console.log(previousQuantity)
        return {
            message: previousQuantity < max ? null : "Max!",
            quantity: previousQuantity < max ? previousQuantity + 1 : max
        };
    }

    function increment() {
        // accepts the argument of a the prevState
        setState(prevState =>
            increase({...prevState,
                previousQuantity:prevState.quantity,
                max: prevState.max})
        );
    };

    //the old function that worked before refactor.

    /*function increment() {
        // accepts the argument of a the prevState
        setState(prevState => ({
            ...prevState,
            quantity: prevState.quantity < prevState.max ? prevState.quantity + 1 : prevState.max,
            message: prevState.quantity < prevState.max ? null : 'Max!!'
        }))
    }*/

    function decrement() {
        setState(prevState => ({
            ...prevState,
            quantity: prevState.quantity > prevState.min ? prevState.quantity - 1 : prevState.min,
            message: prevState.quantity > prevState.min ? null : 'Min!!'
        }))

    }

    function reset(){
        setState(prevState => ({...prevState, quantity: 0}))
    }

    return (
        <div>
            <p>Count: {state.quantity}</p>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>decrement</button>
            <button onClick={reset}>reset</button>
            <div>{state.message}</div>
        </div>
    );
};

export default Counter;

Answer 1

不知道你所说的条件运算符 "not working" 是什么意思，很难确定哪里出了问题，但跳出来的是你的 increase 函数只 returns 一个对象message 和 quantity:

function increase({previousQuantity, max}) {
    console.log(previousQuantity)
    return {
        message: previousQuantity < max ? null : "Max!",
        quantity: previousQuantity < max ? previousQuantity + 1 : max
    };
}

...但是您的 increment 函数正在使用它 完全替换 您的 state 对象：

function increment() {
    // accepts the argument of a the prevState
    setState(prevState =>                           // ***
        increase({...prevState,                     // ***
            previousQuantity:prevState.quantity,    // ***
            max: prevState.max})                    // ***
    );                                              // ***
}; // <=== Side note: No reason for this `;`

这意味着 message 和 quantity 以外的任何属性都将被清除。

当你使用钩子时，你通常不需要单个状态对象，而是单个状态成员，就像这样：

const [message, setMessage] = useState(null);
const [quantity, setQuantity] = useState(0);
// ...

这种模块化有助于保持代码简单。

但是，如果您想保持当前的一体化对象状态，请确保您保留其他属性：

function increment() {
    // accepts the argument of a the prevState
    setState(prevState => ({
        ...prevState,
        ...increase({
            previousQuantity: prevState.quantity,
            max: prevState.max
        })
    });
}

就其价值而言，这是使用离散状态成员的组件；看评论：

// These aren't state, so declare them once outside the component function
const MAX_QUANTITY = 10;
const MIN_QUANTITY = 0;

function Counter()  {

    // These are state
    const [quantity, setQuantity] = useState(0);
    const [message, setMessage] = useState(null);

    // I don't really see a point to the `increase` function, so didn't do it

    function increment() {
        // No particular reason to use the callback version here, you're re-creating
        // the function every time
        if (quantity < MAX_QUANTITY) {
            setMessage(null);
            setQuantity(quantity + 1);
        } else {
            setMessage("Max!");
        }
    }

    function decrement() {
        // ...similar to increment...
    }

    function reset() {
        setQuantity(0);
    }

    return (
        <div>
            <p>Count: {quantity}</p>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>decrement</button>
            <button onClick={reset}>reset</button>
            <div>{message}</div>
        </div>
    );
};

return 语句中的三元运算符在 React useState Hook 中不起作用

ternary operators in return statement do not work in react useState Hook

javascript

reactjs

use-state