useEffects 仅在状态中的某些字段已更改时进行更新

Question

假设我有以下状态

const [states, setStates] = useState([
{name: '', age: '', amount: ''},
{name: '', age: '', amount: ''},
]);
const total = 0;

我希望仅在更改age字段以计算amount字段时使用useEffect进行更新。然后根据更改的amount字段更新total字段。我该怎么做？在此示例中，我有少量包含三个字段的数组，但实际上，我有一个包含大量字段的大数组，因此当states中的任何字段发生变化时，我不想使用useEffect。

Answer 1

简短的回答是你不能这样做 -useEffect钩子不提供跟踪数组内特定对象属性的能力。

您必须跟踪另一个状态，如果任何age属性发生更改，该状态将更改，这将触发在依赖项数组中具有该状态段的useEffect。

const [states, setStates] = React.useState([...])
const [lastAgeUpdatedAt, setLastAgeUpdatedAt] = React.useState(null)
// const total = 0; // by the way, this looks like something that 
// should also be stored in a state,
// the below would be more appropriate
const [total, setTotal] = React.useState(0)
const handleUpdateAge = () => {
setStates(...)
if (ageUpdatesAvailable) {
setLastAgeUpdatedAt(Date.now())
}
}

React.useEffect(() => {
const total = states.reduce(
(accumulator, item) => accumulator + parseInt(item.age, 10), 
0
)
setTotal(total)
}, [lastAgeUpdatedAt])