数据未在道具中过滤。显示 passdata.map 不是一个函数

Question

我正在尝试列出一份待办事项清单。我的应用程序成功获取数据。 但是当我想从列表中删除数据时。它显示 typeerror: passdata.map 不是函数。我刚刚学习react，我不知道问题出在哪里。 N:B：我的代码位于两个组件之间。

import React, { useState } from "react";
import { OutputData } from "./OutputData";

export const Form = () => {
  const [data, setData] = useState("");
  const [val, setVal] = useState([]);

  const changed = (event) => {
    setData(event.target.value);
  };
  const clicked = () => {
    setVal((oldVal) => {
      return [...oldVal, data];
    });
    setData(" ");
    
  };
  const del = (id)=>{
     setVal((newVal)=>{
      return newVal.filter((val,index)=>{
        return id !== index;
      });
     });
     setVal("");
  }
  

  return (
    <div>
      <div>
        <h1>To Do List</h1>
        <input type="text" onChange={changed} />
        <button onClick={clicked}>
          <span>+</span>
        </button>
      </div>
      <div>
        <OutputData passData={val} del={del}></OutputData>
      </div>
    </div>
  );
};

我的第二个组件在这里：

import React from 'react'

export const OutputData = ({passData,index,del}) => {
  return (
    <div>
        {
            passData.map((passData,index)=>{
                return(
                    <div className='lidiv' key={index}>
                        <li>{passData}</li>
                        <button onClick={() => del(index)}>Delete</button>
                    </div>
                )
            })
        }
    </div>
  )
}

我想知道为什么会发生这种情况以及如何解决这个问题

Answer 1

您正在调用

setVal("")

，它将数据类型从数组更改为字符串。