React useState处理数组异常：单元素数组设为空、多元素少一项

我在使用React的useState设置数组状态时遇到异常：当设置的数组仅包含一个元素时，状态会变为空数组；当设置的数组包含多个元素时，状态数组的元素数量会比原数组少一个。以下是示例代码：

import React, { useState } from "react";
import "./styles.css";
import Select from "react-select";

export default function App() {
  const [items, setItems] = useState([]);

  const options = [
    { value: 1, label: "Item 1" },
    { value: 2, label: "Item 2" },
    { value: 3, label: "Item 3" },
  ];

  function hanldeItemChange(selectedItems) {
    // 打印选中的对象
    console.log(`selectedItems = ${selectedItems}`);
    const mappedItems = selectedItems.map(item => item.value);
    // 打印转换后的数值数组
    console.log(`mappedItems = ${mappedItems}`);
    setItems(mappedItems);
    // 此处打印的状态与mappedItems不匹配
    console.log(`items = ${items}`);
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Select
        className="basic-multi-select"
        classNamePrefix="select"
        onChange={hanldeItemChange}
        isMulti
        name="Items"
        options={options}
      />
    </div>
  );
}

1. 异步更新导致的状态读取错误 #

setItems是异步更新React状态的，调用setItems(mappedItems)后，状态不会立刻改变。此时立刻console.log(items)，拿到的是更新前的旧状态，并非刚设置的新值。这是你误以为状态更新异常的核心原因。

2. 数组字符串拼接的视觉误导 #

用${数组}的方式拼接字符串时，数组会被自动转为逗号分隔的字符串，但这种方式无法准确展示数组的真实状态。比如旧状态是空数组时，${items}会输出空字符串，让你误以为新状态变成了空数组；而当旧状态比新状态少一个元素时，打印结果就会看起来像是新状态少了元素。

修复方案 #

方案一：用useEffect监听状态变化

通过useEffect钩子监听items的变化，在状态更新完成后打印最新值：

import React, { useState, useEffect } from "react";
import "./styles.css";
import Select from "react-select";

export default function App() {
  const [items, setItems] = useState([]);

  // 监听items状态变化，更新后打印最新值
  useEffect(() => {
    console.log("当前最新items状态：", items);
  }, [items]);

  const options = [
    { value: 1, label: "Item 1" },
    { value: 2, label: "Item 2" },
    { value: 3, label: "Item 3" },
  ];

  function hanldeItemChange(selectedItems) {
    console.log("selectedItems = ", selectedItems);
    const mappedItems = selectedItems.map(item => item.value);
    console.log("mappedItems = ", mappedItems);
    setItems(mappedItems);
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Select
        className="basic-multi-select"
        classNamePrefix="select"
        onChange={hanldeItemChange}
        isMulti
        name="Items"
        options={options}
      />
    </div>
  );
}

方案二：正确打印数组

直接将数组作为参数传递给console.log，避免字符串拼接，这样能清晰看到数组的完整结构：

// 错误写法
console.log(`mappedItems = ${mappedItems}`);
// 正确写法
console.log("mappedItems = ", mappedItems);

完成以上修改后，你会发现items状态实际上是按照预期正确更新的，之前的异常只是异步更新特性和错误打印方式造成的误解。

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