typescript 未处理的运行时错误,TypeError:www.example.com不是函数tasks.map is not a function

hxzsmxv2  于 2023-01-27  发布在  TypeScript
关注(0)|答案(2)|浏览(167)

我尝试在next js 13中使用typescript完成我的第一个todo-app,但是每当我尝试在我的任务列表中添加任务时,我会得到下面给出的错误

未处理的运行时错误

  • 类型错误:tasks.map不是函数。*

我已经提供了来自页面的代码。tsx文件如下:

"use client"
import "./globals.css";
import { Button, Flex, ListItem, UnorderedList, Text, Input } from "@chakra-ui/react";
import { useState } from "react";
export default function Home() {
  const [tasks, setTasks] = useState(["1", "2", "3"]);
  const [Item, setItem] = useState("");
function removeItem(taskName){
  setTasks(
    tasks.filter((task) => {
      return task!= taskName;
  })
  );
}
function AddItem(taskName){
  if(Item!="" && !tasks.includes(Item));
  let temp=tasks
  temp.push(Item);
  setTasks(Item);
  setItem("");
}
  return (
    <Flex
      justifyContent="center"
      alignItems="center"
      width="100%"
      height="100%"
      flexDirection="column"
    >
      <UnorderedList>
        {tasks.map((task) => {
          return (
            <ListItem key={task.index}>
              {task}
              <Button
                ml={10}
                onClick={() => {
                  removeItem(task); 
                }}>
                Remove Item
              </Button>
            </ListItem>
          )
        })}
      </UnorderedList>
      <Input
        placeContent="item name"
        value={Item}
        onChange={(e) => {
          setItem(e.target.value);
        }}>
      </Input>
<Button onClick={AddItem}>
  Add Item
</Button>
    </Flex>
  )
}
fzsnzjdm

fzsnzjdm1#

更新函数AddItem以使用spread operator重新创建tasks数组:

function AddItem(taskName){
  if(Item!="" && !tasks.includes(Item));
  let temp=[...tasks]
  temp.push(Item);
  setTasks(Item);
  setItem("");
}
brgchamk

brgchamk2#

您在此处将tasks设置为单个项目:

setTasks(Item);

我猜您在这里需要temp而不是Item

setTasks(temp);

如果item不是数组,则map函数将无效并抛出错误。
另外,在AddItem函数中,您正在改变状态,而if语句实际上并没有 Package 任何内容,因此我将整个语句重写为:

function AddItem(taskName) {
  if (Item != '' && !tasks.includes(Item)) {
    setTasks([...tasks, Item]);
    setItem('');
  }
}

我猜你对taskName有计划。
希望这个有用。

相关问题