react-native - 如何挂钩对象数组的属性更改?
问题描述
我想显示用户对象数组中属性的变化。我使用useEffect
但它无法挂钩财产的变化(或者我错过了什么?)。
一组用户对象。
// list of user
const [user, setUser] = React.useState = ([
{
name: 'Tom',
age: 23
},
{
name: 'Marry',
age: 24
},
{
name: 'Dan',
age: 22
},
{
name: 'Rose',
age: 22
},
{
name: 'Alice',
age: 23
}
])
我挂钩的变化user
React.useEffect(() => {
console.log('useEffect: hook user')
console.log(user)
}, [user])
然后,我在按功能单击按钮后更新对象索引 1 的属性年龄handleUpdate()
。
function handleUpdate() {
let v = user
v[1].age = 99
setUser(() => {
return v
})
console.log('updated')
console.log(user)
}
日志显示阵列更新成功,但登录useEffect没有显示任何变化。 更新数组后记录
解决方案
请先阅读这篇文章 - https://www.benmvp.com/blog/object-array-dependencies-react-useEffect-hook/ 我只是使用扩展运算符返回新数组:
import "./styles.css";
import React from "react";
export default function App() {
const [user, setUser] = React.useState([
{
name: "Tom",
age: 23
},
{
name: "Marry",
age: 24
},
{
name: "Dan",
age: 22
},
{
name: "Rose",
age: 22
},
{
name: "Alice",
age: 23
}
]);
React.useEffect(() => {
console.log("useEffect: hook user");
console.log(user);
}, [user]);
const handleUpdate = () => {
let v = [...user];
console.log(user);
v[1].age = 99;
setUser(() => {
return v;
});
console.log("updated");
console.log(user);
};
return (
<div onClick={handleUpdate} className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
https://codesandbox.io/s/solitary-brook-1wdqy?file=/src/App.js
推荐阅读
- r - R中的自动变量命名
- sql - SQL Join - 无法消除笛卡尔结果
- angular - 搜索栏作为 Angular 7 中的服务
- c++ - 为什么这个“数独求解器”算法不起作用
- visual-studio-2019 - 在 Visual Studio 2019 的工具栏中添加分隔符
- javascript - 从一个 HTML 表中复制所有行并附加到另一个表
- julia - 使用 ./startup.jl 文件设置 nprocs()
- oracle - 未找到 Oracle 客户端和网络组件。源 Oracle 数据库 SO AIX
- swift - 过早调用完成处理程序
- reactjs - Chrome 开发者工具显示 JSON 对象的不同值