useState 不适用于对象数组

Question

所以我正在使用 React Hooks 和一组包含按钮的名称。单击这些按钮时，相应的名称将消失。但是数组根本没有更新。

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;

请告知可以做什么，我是 React 的新手。谢谢！

Answer 1

您正在使用永远不会改变的数据变量，而不是使用作为您的“反应状态”的“人”变量。

只需在渲染中使用“人物”即可。

我建议你看看这里：https://reactjs.org/docs/hooks-reference.html#usestate你会找到几个例子

{
        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>
          )
        })
      }

useState 不适用于对象数组

useState not working with Array of Objects

javascript

reactjs

web-development-server