Question

我正在制作一个待办事项应用程序，以了解有关ReactJS和React Hooks的更多信息。问题是我不了解我使用的list.map()出了什么问题。它一直告诉我它不是一个功能。但是我首先看不到我是如何将其用作函数的？

我一直在Google各处查看我在做什么错。我曾尝试以多种方式更改我的代码，但我似乎无法弄清楚出什么问题了。我单击“提交”按钮后，它崩溃了，并显示了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

此运行时错误的原因是=SUM(QUERY(IMPORTRANGE($B$34,TEXT($B2,"m/d/yyyy")&"!$F$8:$I$12"),"SELECT Col4 where Col1='"&$C$34&"'",0))+SUM(QUERY(IMPORTRANGE($B$34,TEXT($B2,"m/d/yyyy")&"!$F$15:$I$19"),"SELECT Col4 where Col1='"&$C$34&"'",0))正在将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不再定义，因此出现错误：

“。map（）不是函数”。

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

list

TypeError：.map不是函数

1 个答案: