Как установить начальное состояние в useState и useEffect - PullRequest
Новая
       9

Как установить начальное состояние в useState и useEffect

0 голосов
/ 10 февраля 2020

Возможно, я не совсем понимаю принципы "oh 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. Что я должен сделать, чтобы правильно сохранить исходное состояние?

Ответы [ 2 ]

0 голосов
/ 10 февраля 2020

Ваша проблема заключается в том, что вы получаете клиента от приставки только при рендеринге компонента. Когда вы нажимаете кнопку «Отправить», функция не пытается снова прочитать данные из Redx, а использует только те данные, которые уже есть, которые могут быть неправильными или нулевыми. Чтобы получить последние данные из магазина приставок, вам нужно обернуть свой компонент с помощью функции Connect : 

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

YourComponent теперь будет получать реквизиты customerNumber каждый раз Ваш магазин редуксов меняется.

Или, если вы предпочитаете ловушки, вы можете использовать useSelector hook: 

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

Теперь каждый раз, когда компоненты рендерится или изменится хранилище лексемов, ловушка useSelector будет возвращать обновление значение

0 голосов
/ 10 февраля 2020

вы можете установить начальное состояние prevCustomerNumber как 

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