如何使用数组map方法定义React useState的初始值？

你的代码有两个核心问题导致无法正常运行：

1. 多余的外层数组包裹：useState([data.map(...)]) 会让最终的 state 变成二维数组（因为 map 本身已经返回一个数组），这显然不是你想要的结构。
2. 箭头函数返回对象的语法错误：箭头函数直接写 { value: item.value } 时，大括号会被解析成函数体而非对象字面量，导致 map 结果全是 undefined。

正确的基础写法 #

直接将 map 的返回值作为 useState 的初始值，同时给箭头函数返回的对象加上小括号：

import data from "./data.js"

const [state, setState] = useState(
  data.map(item => ({ value: item.value }))
)

最佳实践 #

• 空值保护：如果 data 可能是 undefined 或 null，要添加空值判断避免报错：

  const [state, setState] = useState(
    data?.map(item => ({ value: item.value })) || []
  )
  

• 复杂计算用初始化函数：如果数据处理逻辑复杂（比如大量数据转换），用函数作为 useState 的参数，这样计算只会在组件首次挂载时执行一次，避免重复渲染时的不必要计算：

  const [state, setState] = useState(() => {
    // 这里可以写更复杂的处理逻辑
    return data.map(item => ({ value: item.value }))
  })
  

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