如何在 useState 和 useEffect 中设置初始状态

Question

我可能不完全理解原则哦useState hook 并且我现在遇到了几次问题。

我正在尝试使用没有依赖关系的useEffect在我的组件中设置初始状态，然后将其与我从redux获得的其他一些变量进行比较。

// get the customer saved in redux
const Customer = useGetCustomer();

const [prevCustomerNumber, setPrevCustomerNumber] = useState(null)

useEffect(() => {
// if there is already customer saved in redux, set it as the previous customer on mount
    const { CustomerNumber } = Customer || {}
    setPrevCustomerNumber(CustomerNumber)
}, [])

const submit = () => {
//check if there is any change between the customer in redux and the previous one
  const { CustomerNumber } = Customer || {}
  const submitWithoutChanges = Customer && ( CustomerNumber === prevCustomerNumber)
  submitCustomer(Customer, submitWithoutChanges )
}

我的问题是 - 单击提交时， prevCustomerNumber始终为空。 我的问题是：

1. 是不是因为useState在第一个useEffect之后再次运行并覆盖它？
2. 我应该怎么做才能正确保存初始状态？

Answer 1

您可以将 prevCustomerNumber 的初始状态设置为

const [prevCustomerNumber, setPrevCustomerNumber] = useState("some value")

Answer 2

您的问题是只有在组件呈现时才从 redux 中获取客户。 当您单击提交按钮时，该函数不会再次尝试从 redux 中读取数据，而只会使用已有的数据，这些数据可能是错误的或为空的。 为了从 redux 存储中获得最新数据，您需要使用Connect函数包装您的组件：

export default connect ((state) => {
  const customerNumber = state.customer.customerNumber
  return {customerNumber}
})(YourComponent)

每次您的 redux 存储更改时，您的组件现在都会收到 customerNumber 道具。

或者，如果你更喜欢钩子，你可以使用useSelector钩子：

import { useSelector } from 'react-redux'
const customerNumber = useSelector(state => state.customer.customerNumber)

现在每次组件渲染或 redux 存储更改时 useSelector 钩子将返回更新值