React中如何遍历数组生成对象来初始化useState状态

问题原因 #

你的写法逻辑存在问题：Array.map() 本身执行后就会返回一个全新的数组，你在map外层额外嵌套了一层方括号[]，相当于把map生成的对象数组当成了新数组的第一个元素，最终得到的是不符合要求的二维数组，因此无法生效。

正确写法 #

如果paths在组件初始化时就已经是确定存在的数组，直接移除外层多余的方括号即可：

import { useState } from 'react';

export default function MyComponent({ paths }) {
  const [state, setState] = useState(paths.map((path) => ({
    source: path,
    options: { type: 'local' }
  })));
}

兜底兼容写法 #

如果paths可能存在初始为undefined的情况，可以加可选链和空值兜底避免报错：

import { useState } from 'react';

export default function MyComponent({ paths }) {
  const [state, setState] = useState(paths?.map((path) => ({
    source: path,
    options: { type: 'local' }
  })) ?? []);
}

动态更新场景写法 #

如果组件运行过程中paths props会发生变化，需要同步更新state，可以搭配useEffect监听paths变动：

import { useState, useEffect } from 'react';

export default function MyComponent({ paths }) {
  const [state, setState] = useState([]);

  useEffect(() => {
    setState(paths?.map((path) => ({
      source: path,
      options: { type: 'local' }
    })) ?? []);
  }, [paths]);
}

内容的提问来源于stack exchange，提问作者Grosu Cristi-Alexandru