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

#javascript #reactjs

Вопрос:

Здесь я хочу обновить state.value, когда я получаю данные из входных данных, и я использую тег «имя», чтобы найти, какой именно ключ нужно обновить в state.value. Но здесь, в моем коде, я использую крючок useReducer для хранения данных в состоянии в моем пользовательском пользовательском вводе. но проблема, с которой я сталкиваюсь, заключается в том, что я не могу изменить состояние здесь, как вы можете видеть, я получаю данные из функции диспетчера, но я не могу сохранить их в состояние, так как я не могу получить к ним доступ из функции редуктора.

 
import React from "react";

const reducer = (state, actions) => {
  switch (actions.type) {
    case "getData":
      return {
        ...state,
        value: { ...state.value, [actions.name]: actions.value }, // ****cannot acccess data here
      };
    default:
      return state;
  }
};

const useInput = () => {
  const defaultValue = {
    value: {
      fullname: "",
      address: "",
      pincode: "",
      city: "",
      phone: "",
    },
    touch: {
      fullname: false,
      address: false,
      pincode: false,
      city: false,
      phone: false,
    },
  };

  const [state, dispatcher] = React.useReducer(reducer, defaultValue);

  const getData = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    dispatcher({ type: "getData", [name]: value }); // ****heres the dispatcher function
  };

  //   const blurHandler = (e) => {
  //     dispatcher({ type: "touch", value: true });
  //   };
  console.log(state.value);
  return {
    getData,
  };
};

export default useInput;

1. что вы видите, когда выполняете действия в журнале консоли ?

2. я получил это, когда я консольно регистрирую действия и печатаю в своей форме ibb.co/SX4nCyJ

3. у тебя в этом проблема ? ваш редуктор ожидает, что действие будет иметь имя и значение, но вместо этого у вас есть полное имя

4. да, но как мне это сделать, когда ключ и значение являются динамическими

Ответ №1:

Попробуйте передать payload объект, содержащий name value свойство и, в функцию отправки:

 const getData = (e) => {
    const name = e.target.name;
    const value = e.target.value;

    dispatcher({ type: "getData", payload: { name, value }});
};

Затем вы можете изменить свой редуктор следующим образом, чтобы изменить относительное значение:

 const reducer = (state, actions) => {
    switch (actions.type) {
    case "getData":
        return {
            ...state,
            value: { ...state.value, [actions.payload.name]: actions.payload.value }, 
        };
    default:
        return state;
    }
};