API 响应未正确更新 useState

Question

我正在访问一个 API 以返回一些传递到 useState 挂钩的数据，以便我可以映射该数据并向用户显示，但由于某种原因，如果不手动刷新，数据不会更新。仅供参考，我正在使用 Redux saga 和 Redux 选择器从状态检索数据，但这不是重点。以下是相关代码片段：

import React, {useState} from 'react'

const BillingAddressDetails = () => {
  const activeAddresses = useAppSelector(getProfileActiveAddresses);
  const [sortedActiveAddresses, setSortedActiveAddresses] = useState([...activeAddresses]};
  
  return (
  sortedActiveAddresses.map(address => <BillingAddressCard={address} />
};

const BillingAddressCard = ({address}) => {
  return (
   <div>
     <span>{address.firstName} {address.lastName}</span>
     <span>{address.streetLine1}</span>
     <span>{address.city}</span>
   </div>
   )
}

我有一个按钮，可以点击 PUT API 来更新单个地址，但在成功的 API 响应之后，当我 console.log activeAddresses 时，我会看到正确的数据和正确更新的地址，但如果我 console.logsortedActiveAddresses ，我会看到旧数据和更新的地址不会更新。如果我手动刷新页面，那么我会得到带有更新地址的正确数据。另外，如果我完全删除 useState 并仅映射 activeAddresses 以提供要显示的 BillingAddressCard 组件数据，我会得到同样的结果，需要手动刷新才能显示正确的数据。我在这里缺少什么？谢谢您的帮助！

Answer 1

sortedActiveAddresses

并不总是与

activeAddresses

同步的原因是您仅在

sortedActiveAddresses

的第一次渲染时更新

BillingAddressDetails

:

运行

useState([...activeAddresses]};

时，

useState

只会在第一次关心参数（

[...activeAddresses]

）并将其用作初始值，之后即使它发生变化也会被丢弃，因为，当然，它是一个状态。 如果您想在

activeAddresses

更改时更新它，您需要使用额外的

useEffect

。

但是在这种情况下，看起来

sortedActiveAddresses

直接依赖于

activeAddresses

并且仅依赖于

activeAddresses

。在这种情况下，你不应该使用

sortedActiveAddresses

的状态（因为它不是它自己的状态，它只是

activeAddresses

的派生。所以我建议你完全删除状态，正如你在文中提到的那样.

您写道

console.log(activeAddresses)

显示了正确的数据，而将

BillingAddressCard

映射到

activeAddress

则给出了错误的数据。鉴于您所显示的代码，情况不可能如此。只需删除状态即可解决您的问题。