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

Question

I might be not understanding completely the principals oh useState hook and there is a problem I came across a few times now.

I'm trying to set an initial state in my component using useEffect without dependencies and later on compare it to some other variables I get from 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 )
}

My problem is - when clicking submit, prevCustomerNumber is always null. My questions are:

1. Is it because useState runs again after the first useEffect and override it?
2. What should I do to save initial state properly?

Answer 1

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

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

Answer 2

Your problem is that you get the customer from redux only when the component renders. When you click submit button, the function does not tries to read the data from redux again and only uses the data that already has which may be wrong or null. In order to have the latest data from redux store you need to wrap your component with the Connect function:

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

YourComponent will now receive the customerNumber props every time your redux store changes.

Or if you prefer hooks you can use useSelector hook:

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

Now every times the components renders or the redux store changes the useSelector hook will return the update value