类型错误：.map 不是函数

Question

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

我一直在谷歌上查看我做错了什么。我尝试过以多种方式更改我的代码，但我似乎无法弄清楚出了什么问题。一旦我单击“提交”按钮，它就会崩溃并给我TypeError: list.map is not a function 错误。

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() 不是函数”。

如果您更改组件中的以下代码部分，这将确保 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]);
  };