我应该如何获取 useState 字符串的先前状态？

Question

我试图在单击复选框时向 useState 挂钩添加值，并在未选中时删除该值。我可以很好地添加这些值，但我似乎不知道如何删除它们。我可以让这个过程适用于浮点数的价格 useState，但是在字符串上执行此操作是我遇到问题的地方。

这是代码部分：

function handleSpec(p, e) {
    var temp = parseFloat(p);
    if(e.target.checked) {
        setSpecOrder(prevSpecOrder => prevSpecOrder + e.target.value);
        setPrice(prevPrice => prevPrice + temp);
    }
    else if(!e.target.unchecked){
        setSpecOrder(prevSpecOrder => prevSpecOrder);
        setPrice(prevPrice => prevPrice - temp);
    }
}

Answer 1

我建议将复选框的状态作为您所在州的一部分，并将总价作为计算值而不是存储在状态中的值。

我不知道您的代码中应该包含什么“规格顺序”，并且没有足够的详细信息来显示在代码上下文中执行上述操作，但这里有一个具有价格和单独的示例有条件包含在总额中的额外金额：

const { useState } = React;

const Example = () => {
    const [price, setPrice] = useState(100);
    const [extra, setExtra] = useState(10);
    const [useExtra, setUseExtra] = useState(false);
    const totalPrice = price + (useExtra ? extra : 0);
    //    ^^ Notice how `totalPrice` is a computed value
    
    return (
        <div>
            <div>
                <label>
                    Price:{" "}
                    <input
                        type="number"
                        value={price}
                        onChange={({ currentTarget: { valueAsNumber } }) => setPrice(valueAsNumber)}
                    />
                </label>
            </div>
            <div>
                <label>
                    <input
                        type="checkbox"
                        checked={useExtra}
                        onChange={({ currentTarget: { checked } }) => setUseExtra(checked)}
                    />{" "}
                    Use extra
                </label>
            </div>
            <div>
                <label>
                    Extra:{" "}
                    <input
                        type="number"
                        value={extra}
                        disabled={!useExtra}
                        onChange={({ currentTarget: { valueAsNumber } }) => setExtra(valueAsNumber)}
                    />
                    <div></div>
                </label>
            </div>
            <div>
                <strong>Total:</strong> {totalPrice}
            </div>
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>