为何React中useState设默认值后仍返回undefined？

核心错误原因 #

useState 钩子的返回值是数组，而非对象。你错误地使用了对象解构语法（{}）来获取状态和更新函数，这会导致变量无法正确赋值，最终得到undefined。

第一个代码示例修正 #

原代码错误使用对象解构：

const arr = ["b", "a", "n"];
const { testing, setTesting } = useState(arr); // ❌ 对象解构不适用
console.log(Array.isArray(testing));
console.log(testing);

改为数组解构即可正常获取状态：

const arr = ["b", "a", "n"];
const [testing, setTesting] = useState(arr); // ✅ 正确的数组解构
console.log(Array.isArray(testing)); // 输出 true
console.log(testing); // 输出 ["b", "a", "n"]

第二个购物车代码修正 #

同样是对象解构导致cartItems为undefined，进而调用find时抛出Cannot read property 'find' of Undefined错误。

原错误代码：

const { cartItems, setCartItems } = useState([]); // ❌ 对象解构错误

修正为数组解构后，cartItems初始化为空数组，find方法可正常调用：

const [cartItems, setCartItems] = useState([]); // ✅ 正确的数组解构
console.log(Array.isArray(cartItems)); // 输出 true

const onAdd = (product) => {
  // 可选：提前判断product是否有效，避免后续错误
  if (!product?.id) return;
  
  const exists = cartItems.find((x) => x.id === product.id);
  if (exists) {
    setCartItems(
      cartItems.map((x) =>
        x.id === product.id ? { ...exists, qty: exists.qty + 1 } : x
      )
    );
  } else {
    setCartItems([...cartItems, { ...product, qty: 1 }]);
  }
};

内容的提问来源于stack exchange，提问作者Maximiliano Castrejón