React报错：TypeError: items.map is not a function——初始状态为数组仍触发该错误

我一眼就看出问题出在哪儿了——你在 CreateItem 组件里错误地复用了父组件的数组状态来管理输入框的值，直接把原本的数组给改成字符串了，这才导致 ListItem 里的 map 调用失败。

问题根源拆解 #

1. 状态类型被篡改：父组件的 items 是用来存列表项的数组，但在 CreateItem 里，你把输入框的 value 绑定到了 items，还在 onChange 里执行 setItem(e.target.value)——这会直接把数组状态覆盖成字符串！等用户输入内容后，items 就不再是数组了，map 自然就报错。
2. addItem 逻辑混乱：你在提交函数里先执行 setItem([...items, items])，如果此时 items 已经是字符串，展开字符串会得到字符数组，之后又执行 setItem("")，彻底把状态改成了空字符串，直接破坏了数组类型。

修复方案 #

我们需要让输入框的状态和父组件的列表数组状态分离，在 CreateItem 里单独维护输入框的局部状态：

修改后的 CreateItem 组件：

import React, { useState } from "react";

const CreateItem = (props) =>{
  const { items, setItem } = props;
  // 用局部状态单独管理输入框内容，不污染父组件的数组
  const [inputValue, setInputValue] = useState("");

  const addItem = (e) =>{
    e.preventDefault();
    // 避免添加空内容
    if(inputValue.trim()){
      // 把输入框的值添加到父组件的数组里
      setItem([...items, inputValue]);
      // 清空输入框
      setInputValue("");
    }
  }

  return(
    <div>
      <h1>create item comp</h1>
      {/* React 事件是驼峰式，要改成 onSubmit 而不是 onsubmit */}
      <form onSubmit={addItem}>
        <input 
          type="text" 
          value={inputValue} 
          onChange={e => setInputValue(e.target.value)}
        />
        <button type="submit">add item</button>
      </form>
    </div>
  )
};

export default CreateItem;

另外，ListItem 里还有个小问题：React 里要用 className 代替原生的 class 属性，还要给循环元素加 key 避免警告：

修改后的 ListItem 组件：

import React from "react";

const ListItem = (props) =>{
  const { items } = props;
  return(
    <div>
      <h1>list item comp</h1>
      <ul>
        { items.map((item, i) => (
          // 替换 class 为 className，添加 key 属性
          <div key={i} className="flex">
            <input type="checkbox" />
            {item}
            <button>delete</button>
          </div>
        )) }
      </ul>
    </div>
  )
};

export default ListItem;

总结 #

核心问题就是你把「存储列表的数组」和「输入框的临时值」这两个完全不同的状态混在了一起，导致数组类型被破坏。通过给输入框单独维护局部状态，就能保证父组件的 items 始终是数组，map 也就可以正常执行了。

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