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

【问题标题】：How to set initial state in useState and useEffect如何在 useState 和 useEffect 中设置初始状态
【发布时间】：2020-02-10 10:46:16
【问题描述】：

我可能没有完全理解原理哦useState钩子，现在我遇到了几次问题。

我正在尝试使用 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 始终为空。我的问题是：

是因为useState 在第一个useEffect 之后再次运行并覆盖它吗？
如何正确保存初始状态？

【问题讨论】：

也许你需要考虑使用useCallback？

标签： javascript reactjs redux react-hooks

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

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

现在每次组件渲染或 redux 存储发生变化时，useSelector 钩子都会返回更新值

【讨论】：