Блог

Простой компонент крючка ниже, при отправке формы он выдает исключение и запускает триггеры крючка useEffect и выдает сообщение об ошибке.,

если отправить снова по какой-то причине, эффект использования не срабатывает..

Я могу заверить вас, что действие работает так, как ожидалось, так как я выполняю действия с отладчиками.. он не вступает в действие после первой отправки..

компонент:

 import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'

const { messages, error } = useSelector((state) => state.contact)

  const dispatch = useDispatch()

  useEffect(() => {
    debugger
    if (error) {
      alert(messages)
    }
  }, [error, messages])

  const onSubmitForm = (data) => {
    dispatch(postContact(data))
  }
 

Экшен:

 export const postContact = ({ name, email, website, message }) => async (
  dispatch
) => {
  try {
    dispatch({
      type: CONTACT_POST,
    })
    const response = await axios.post('/contact', {
      data: {
        Name: name,
        Email: email,
        Website: website,
        Message: message,
      },
    })
    dispatch({
      type: CONTACT_POST_SUCCESS,
      payload: response.data,
    })
  } catch (error) {
    debugger
    dispatch({
      type: CONTACT_POST_FAIL,
      error: error.message,
    })
  }
}
 

редуктор:

 export default function contact(state = initialState, action = {}) {
  switch (action.type) {
    case CONTACT_POST:
      return {
        ...state,
      }
    case CONTACT_POST_SUCCESS:
      return {
        ...state,
        messages: 'Completed successfully',
        error:false,
      }
    case CONTACT_POST_FAIL:
      debugger
      return {
        ...state,
        messages: action.error,
        error: true,
      }
    default:
      return state
  }
}
 

Потому что для свойства ошибка и сообщение не изменяется значение. Значение ошибки всегда присваивается как «true». Попробуйте прослушать само состояние целиком.

 const contactState = useSelector((state) => state.contact)

 useEffect(() => {
    debugger
    if (error) {
      alert(messages)
    }
  }, [contactState ])
 

Или вам нужно сбросить значение ошибки и сообщение при отправке запроса

  case CONTACT_POST:
      return {
        ...state, error:false, messages:""
      }