Question

类型错误：.map 不是一个函数

2019-08-11

27176

javascript reactjs react-hooks

我正在制作一个小型 To-Do 应用程序，以了解有关 ReactJS 和 React Hooks 的更多信息。问题是我不明白我正在使用的 list.map() 有什么问题。它一直告诉我它不是一个函数。但我不明白我首先是如何将它用作函数的？

我一直在谷歌上查找我做错了什么。我尝试以多种方式更改我的代码，但似乎无法找出问题所在。只要我点击“提交”按钮，它就会崩溃并给我 TypeError：list.map 不是函数 错误。

function ToDoList() {
  const [list, setlist] = useState(["Test 1", "Test 2"]);
  const [newItem, setnewItem] = useState("");

  const handleChange = e => {
    setnewItem(e.target.value);
    console.log(newItem);
  };

  const handleSubmit = () => {
    setlist(...list, newItem);
  };

  return (
    <div>
      <input onChange={handleChange} />
      <button onClick={handleSubmit}>Submit</button>
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <AppTitle />
      <ToDoList />
    </div>
  );
}

我正在尝试将 newItem 添加到 list 并通过 .map() 呈现列表。当我启动应用程序时，“测试 1”和“测试 2”会渲染，但添加到列表并重新渲染会导致应用程序崩溃。

Answer 1

此运行时错误的原因是 handleSubmit() 正在将 list 状态更新为非数组类型：

  const handleSubmit = () => {
    /* 
    The list is spread into the arguments of setlist() meaning that state
    is updated to the first value of the list array
    */ 
    setlist(...list, newItem);
  };

因此，当调用 handleSubmit() 时， list 状态值不再是数组，这又意味着 list.map() 不再定义，因此出现错误：

".map() is not a function".

如果更改组件中的以下代码部分，这将确保 list 更新为新数组（其中“newItem”的值附加到该新数组的末尾）：

  const handleSubmit = () => {

    /* 
    Update the list state to a new array, with newItem appended to the
    end of it. This ensures the list state remains as an array type,
    ensuring the list.map() is defined 
    */
    setlist([...list, newItem]);
  };