React项目中Array.filter未生效 无法过滤旅游地点列表

删除功能不生效是两处代码写法错误导致的：

• 状态初始化层级错误：useState([datas]) 给导入的旅游数据多套了一层数组。通常从toursData.js导出的datas本身就是存储所有地点信息的一维数组，额外套方括号后，locations会变成二维数组[ [全部地点对象] ]，执行filter遍历时拿到的元素是整个数组对象，不存在id属性，永远匹配不到传入的待删除id，过滤逻辑完全失效。
• 组件传值写死：给Tours组件传递展示数据时，你直接传入了原始静态数据datas，没有绑定你维护的响应式状态locations。就算后续正确修改了locations的值，组件拿到的永远是未改动的原始数据，页面不会触发重渲染，删除操作看起来就没有任何效果。

另外GitHub提示的代码报错，大概率是你漏写了根组件的导出语句，补上export default App即可。

import { useState } from 'react';
import './App.css';
import Tours from './tours.js'
import datas from './toursData.js'

function App() {
  // 移除多余的方括号，直接用原始数据初始化状态
  const [locations, setLocations] = useState(datas)

  const handleRemoval = (id) => {
    const newLocations = locations.filter(location => location.id !== id);
    console.log(newLocations);
    setLocations(newLocations);
  }

  return (
    // 传递响应式状态locations给子组件，而非静态的原始datas
    <Tours tours={locations} handleRemoval={handleRemoval}/>
  );
}

export default App;

改完后重新运行，点击移除按钮时控制台会打印长度正确减1的新数组，页面也会同步删除对应旅游地点条目。

内容的提问来源于stack exchange，提问作者Adil Ali