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

Question

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

3

我正在制作一个小的待办事项应用程序，旨在更多地了解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()方法渲染列表。当我启动应用程序时，"Test 1"和"Test 2"被渲染出来，但是当我尝试添加到列表并重新渲染它时，程序会崩溃。

- iLoveSpicyNoodles

3

如果list.map不是一个函数，那么list就不是一个列表。 - Unlocked

哦，所以基本上它告诉我我的handleSubmit函数破坏了列表？这解释了Dacre Denny的答案。 - iLoveSpicyNoodles

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dacre Denny · Accepted Answer

这个运行时错误的原因是 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]);
  };