javascript - useState 不适用于对象数组
问题描述
所以我正在使用 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 的新手。谢谢!
解决方案
您正在使用永远不会改变的数据变量,而不是使用作为“反应状态”的“人”变量。
只需在渲染中使用“人”。
我建议你看看这里: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>
)
})
}
推荐阅读
- json - 使用递归枚举编码 JSON 的 Swift Codable 协议
- node.js - npm 的非确定性行为
- visual-studio-code - 如何在 Emmet 中为 BEM 功能设置 VS Code 编辑器?
- token - 延长访问令牌寿命的身份机制
- amazon-web-services - 未使用 AWS EC2 IAM 角色
- php - php stream_select 正在返回没有什么可读取的流
- xcode - 为什么 Xcode 总是在 ~ 1 小时 8 分钟后关闭运行 100% 的 CPU?
- c# - C# 如何将序列化的 .NET 对象编译为 .NET 程序集
- c# - 可以使 IntelliSense 不区分重音吗?
- java - 通过捆绑在片段之间传递值