React待办列表报错：passdata.map is not a function问题排查与解决

错误原因 #

在Form组件的del函数中，你连续执行了两次setVal：

• 第一次通过filter方法过滤数组，得到删除指定项后的新列表
• 第二次直接把val设置成了空字符串""

当val变成字符串后，传递给OutputData组件的passData不再是数组，而字符串没有map方法，因此触发了TypeError。

解决方法 #

删除del函数里多余的setVal("")语句，只保留过滤数组的逻辑即可。同时可以优化输入框的双向绑定，避免输入状态异常。

修改后的Form组件代码 #

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} value={data} /> {/* 加上value绑定，实现双向控制 */}
        <button onClick={clicked}>
          <span>+</span>
        </button>
      </div>
      <div>
        <OutputData passData={val} del={del}></OutputData>
      </div>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Supreme Khan