Question

假设我处于以下状态

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

当useEffect字段被更改为计算age字段时，我希望使用amount仅更新。然后根据已更改的total字段更新amount字段。我怎么做？在此示例中，我只有很少的包含三个字段的数组，但是实际上，我有很多包含很多字段的数组，因此当{{1}中的任何字段都不想使用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])

仅当状态中的某些字段已更改时，useEffect才会更新

1 个答案: