使用filter删除useState管理的数组对象未生效问题求助

问题原因 #

• 渲染活动列表绑定的是activities状态，但删除操作更新的是独立的filteredActivityNames状态，二者没有关联，页面不会触发更新。
• 新增活动的方法存在变量作用域问题，输入内容不满足长度要求时会传入undefined覆盖活动列表。
• 模板存在多根节点、方法名绑定错误的语法问题。

修复后代码 #

App.jsx

import { useState } from 'react';
import { Activity } from './Activity.jsx';

export default function App() {
  const [value, setValue] = useState('');
  const [activities, setActivities] = useState([
    { id: 0, name: 'Feel free to add, edit and delete!' }
  ]);

  // 新增活动逻辑
  const handleAddActivity = () => {
    const activity = {
      id: Math.random() * 10000,
      name: value
    };
    if (activity.name.length >= 3) {
      setActivities(prev => [...prev, activity]);
      setValue('');
    }
  };

  // 删除活动逻辑
  const handleDelActivity = id => {
    setActivities(prev => prev.filter(item => item.id !== id));
  };

  const activityComponent = activities.map(activity => (
    <Activity
      key={activity.id}
      activityName={activity.name}
      deleteActivity={() => handleDelActivity(activity.id)}
    />
  ));

  return (
    <>
      <section>
        <input value={value} onChange={e => setValue(e.target.value)} />
        <button onClick={handleAddActivity}>Add</button>
      </section>
      {activityComponent}
    </>
  );
}

Activity.jsx（仅做交互优化，原有逻辑无问题）

export const Activity = ({ activityName, deleteActivity }) => {
  return(
    <section>
      <h3>{activityName} <span onClick={deleteActivity} style={{cursor: 'pointer', color: 'red'}}> Delete </span> </h3>
    </section>
  )
};

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