Javascript useState不使用对象数组

因此，我正在使用React钩子和一个包含按钮的名称数组。单击这些按钮，相应的名称将消失。但阵列根本没有更新

import React, {useState} from "react";
import Profile from "./profile.js";
import './App.css';


const data = [
  {name: "A"},
  {name: "B"},
  {name: "C"},
  {name: "D"},
]
function App() {

  const [people, setPeople] = useState(data);

  return (
    <div className="App">
      <h1>Birthdays Today</h1> 
      {
        data.map((person)=>{
          const name = person.name;
          return(
            <div>
              <Profile name={name}/>
              <button type="button" className="btn" onClick={()=>{
                let newPeople = people.filter(person => person.name!=={name});
                console.log(newPeople);
                setPeople(newPeople);
              }}>Clear this birthday</button>
            </div>
          )
        })
      }
      <button type="button" className="btn" onClick={()=>setPeople([])}>Clear all birthdays</button>
    </div>
  );
}

export default App;

import React，{useState}来自“React”；
从“/Profile.js”导入配置文件；
导入“/App.css”；
常数数据=[
{name:“A”}，
{name:“B”}，
{name:“C”}，
{name:“D”}，
]
函数App（）{
const[people，setPeople]=useState（数据）；
返回(
今天的生日
{
data.map（（个人）=>{
const name=person.name；
返回(
{
让newPeople=people.filter（person=>person.name！=={name}）；
console.log（newPeople）；
setPeople（newPeople）；
}}>过生日
)
})
}
setPeople（[]）}>清除所有生日
);
}
导出默认应用程序；

---

请告诉我能做什么，我是React的新手。谢谢大家!

您使用的是永不改变的数据变量，而不是“人员”变量，即您的“反应状态”

只需在渲染中使用“人”

我建议你看看这里，你会发现几个例子

{
        person.map((person)=>{
          const name = person.name;
          return(
            <div>
              <Profile name={name}/>
              <button type="button" className="btn" onClick={()=>{
                let newPeople = people.filter(person => person.name!=={name});
                console.log(newPeople);
                setPeople(newPeople);
              }}>Clear this birthday</button>
            </div>
          )
        })
      }

{
person.map（（person）=>{
const name=person.name；
返回(
{
让newPeople=people.filter（person=>person.name！=={name}）；
console.log（newPeople）；
setPeople（newPeople）；
}}>过生日
)
})
}