React中能否仅用一个useState？现有代码报错求解决方案

1. 修正初始状态避免首次渲染报错 #

你把cartState初始值设为null，首次渲染时直接访问cartState["a"]会触发类型错误。把初始值改成空对象{}即可。

2. 合并状态而非直接替换 #

每次调用setCartState({[name]: value})会完全覆盖之前的状态，所以最后只会保留b: "222"。改用函数式更新，合并旧状态和新值：

setCartState(prevState => ({...prevState, [name]: value}))

3. 简化参数传递 #

调用Cart(["a"], "111")时，数组作为键会被转成字符串，但直接传字符串"a"更清晰。

修改后的完整代码：

import { useState, useEffect } from "react";

function App() {   
    const [cartState, setCartState] = useState({});

    function Cart(name, value) {
        setCartState(prevState => ({
            ...prevState,
            [name]: value
        }))                
    }

    useEffect(() => {
        Cart("a", "111");
        Cart("b", "222");        
    }, []);

    return (
        <>
            <div>
                {cartState["a"]}
                <br />
                {cartState["b"]}
            </div>
        </>
    )    
}

export default App;

修改后，useEffect里的两次调用会合并状态，最终cartState为{a: "111", b: "222"}，渲染时会正确输出你期望的结果，同时解决了首次渲染的报错问题。

内容的提问来源于stack exchange，提问作者Cookie