Блог

Главная - Вопросы по программированию - Обновление объекта с помощью useSelector

Обновление объекта с помощью useSelector

#reactjs #react-redux #react-hooks

#reactjs #реагировать-redux #реагирующие крючки

Вопрос:

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

 const EditEmployee = ({history, match}) => {
    const empById = match.params.id
    const dispatch = useDispatch()

    const employee = useSelector((state) => state.employee.employee)
    const {loading, emp} = employee

    const [full_name, setFull_name] = useState('');
    const [email, setEmail] = useState('');
    const [phone_number, setPhone_number] = useState('');
    const [address, setAddress] = useState('');

    useEffect(() => {
        if (emp != null) {
            setFull_name(emp.full_name)
            setEmail(emp.email)
            setPhone_number(emp.phone_number)
            setAddress(emp.address)
        }
        dispatch(getSingleEmployee(empById))
    }, [emp, empById, dispatch])

Может кто-нибудь помочь

Комментарии:

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

Ответ №1:

привет, вы можете использовать useDisaptch

     const dispatch = useDispatch()
    const getOneEmployee = useCallback(
        (id) => dispatch(getSingleEmployee(Id)),
        [dispatch]
      )
   useEfffect(()=>{  
     if (emp != null) {
            setFull_name(emp.full_name)
            setEmail(emp.email)
            setPhone_number(emp.phone_number)
            setAddress(emp.address)
        }
        getOneEmployee(empById
    },[emp,empById])

Ответ №2:

сначала просто отправьте действие getEmployee

 useEffect(() => {
        dispatch(getSingleEmployee(empById))
   }, [dispatch, empById])

и затем, если данные emp обновляются, обновите оставшиеся поля

 useEffect(() => {
        if (employee!= null) {
            setFull_name(employee.full_name)
            setEmail(employee.email)
            setPhone_number(employee.phone_number)
            setAddress(employee.address)
        }
    }, [employee])

если это ваше начальное состояние

 const initialState = {     
    employees: [],     
    employee: {},     
    loading: false 
}

тогда useSelector должен быть

 const employee = useSelector((state) => state.employee)  // reducer name - employee
const {loading, employee} = employee

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

Комментарии:

1. ну, почему бы вам не использовать useDispatch, если вы используете useSelector

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

3. Привет, Мадхури, это не сработало. вот мой редуктор const initialState = { employees: [], employee: {}, loading: false } export default (state = initialState, action) => { switch (action.type) { case GET_EMPLOYEES: return { ...state, employees: action.payload, loading: false } case GET_SINGLE_EMPLOYEE: return { ...state, employee: action.payload, loading: false }

4. да, но лучше создать функцию там и использовать обратный вызов

5. Я думаю, что ваше начальное состояние не соответствует useSelector(), у вас есть state.employee.employee, что-то не так, что вы пытаетесь получить. консоль

Метки: