Question

我可能对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之后再次运行并覆盖它吗？
如何正确保存初始状态？

Answer 1

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

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

Answer 2

您的问题是，仅在组件渲染时才从redux获得客户。当您单击提交按钮时，该函数不会尝试再次从redux读取数据，而仅使用已经拥有的数据，该数据可能是错误的或为null。为了从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挂钩都会返回更新值

如何在useState和useEffect

2 个答案: