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

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

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

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

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;

---

如果不知道条件运算符不起作用是什么意思，就很难确定出了什么问题，但跳出的问题是，递增函数只返回一个包含消息和数量的对象：

这意味着除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>
    );
};

---

我的三元运算符似乎不工作不工作怎么办？发生了什么事？应该发生什么？@VLAZ递增函数中的条件参数没有被返回，导致没有显示任何值。在我修改代码之前，这个方法是有效的。所以我做了一些错事，但并不是我错在哪里。我只是指我目前的代码版本不再工作，就像以前一样，由于我的破坏和缺乏理解。今天我学到了两件事，简单和什么东西应该放在状态中。谢谢：

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