React中如何将对象推入useState状态数组 解决map报错问题

map is not a function 报错只有一个原因：你更新状态后，values 不再是数组类型。React 状态更新是替换逻辑，只要你某次给 setValues 传入了对象、字符串、null 这类非数组值，后续对 values 调用数组专属的 map 方法就会触发这个报错。

你的初始状态写法是正确的：

const [values, setValues] = useState([]);

根据你的需求，分两种常见场景处理：

场景1：全量替换数组（比如首次拿接口数据赋值） #

拿到类似 ['abc', 'bcd'] 的字符串数组后，先遍历把每个字符串转成 {Books: 字符串} 的结构，再整体传入 setValues，全程保证传入的值是数组：

// 这里替换成你实际拿到的源数据
const sourceStrArr = ['abc', 'bcd'];
// 转换后赋值
setValues(sourceStrArr.map(strItem => ({ Books: strItem })));

执行后 values 的值就是你要的 [{Books: 'abc'}, {Books: 'bcd'}] 格式。

场景2：往已有数组里追加新对象 #

不要直接对原状态数组做push操作（会直接修改原状态，引发渲染异常），要基于旧状态生成全新的数组：

// 要新增的书名字符串
const newBookName = 'efg';
setValues(prevValues => {
  // 展开旧数组，拼接上新的对象，返回全新数组
  return [...prevValues, { Books: newBookName }]
})

• 所有传给 setValues 的值必须是数组类型，如果是从接口获取的数据，先做类型兜底，避免接口返回异常值（比如null、对象）导致状态类型错误：

  // 接口数据兜底示例
  const res = await fetch('/api/book-list');
  const data = await res.json();
  // 不是数组的话兜底为空数组
  const safeData = Array.isArray(data) ? data : [];
  setValues(safeData.map(item => ({Books: item})));
  

• 不要直接修改原状态：比如 values.push({Books: 'xxx'}) 这种写法会直接修改当前状态的引用，React 检测不到状态变化，会引发渲染不更新、数据不一致的问题。

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