如何挂钩对象数组的属性更改？

Question

我想显示用户对象数组中属性的变化。我使用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])

然后，我通过函数handleUpdate()点击按钮后更新对象索引1的属性年龄。

function handleUpdate() {
  let v = user
  v[1].age = 99
  setUser(() => {
    return v
  })
  console.log('updated')
  console.log(user) 
}

日志显示数组更新成功，但登录useEffect没有显示任何变化。 log after updated array

Answer 1

请先阅读这篇文章 - 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

Answer 2

你只需要像这样更新你的handleUpdate func：

  const handleUpdate = () => {
    let v = [...user];
    console.log("user: ", user);
    v[1].age = 99;
    console.warn("v: ", v)
    setUser(oldArray => [...oldArray, v]);
    console.log("updated user: ", user);
  };

希望这对你有用