1

I have this code which seems to be executing each dispatch of the useReducer twice for some reason I don't get to resolve. I have tried to solve it by moving userReducer out of the component, but the results were the same. At this point I don't know how to approach the problem.

Another issue caused by the repetition of the code is that I create empty arrays [] to work with them but in the second repetition, it creates [''] over the empty array, which shouldn't happen.

Edit: Searching info, I disabled strict mode as well, but the problem persists.

I suggest to see the whole code here: https://codesandbox.io/s/gallant-villani-zfwbpg?file=/src/App.js

(To trigger the problem, insert one number in the first input at the top, then press the button next to it, A red button will appear to restore previous values. When pressed, two consoles.log are displayed, this happens in every dispatch type.)

here is the useReducer:

function reducer(state, action) {
    const arrayPueblosYexclus = ["pueblos_T1","pueblos_T2","pueblos_T3","exclusiones"];
    switch (action.type) {
      case "RESTORE":
        console.log("restored");
        return valorPrevio;
      break;
      case "FETCH_SUCCESS":
        const datos = action.payload;
        datos?.forEach((element) => { 
          arrayPueblosYexclus?.map(arel=>{
          return element[arel] !== null 
            ? (element[arel] = element?.[arel]
              ?.toString()
              .trim()
              .split(","))
            : (element[arel] = []);
          })
        
        console.log(element.pueblos_T1,element.pueblos_T2,element.pueblos_T3);
        
        });
        setLoading(false);
        setValorPrevio(state);
        return { ...state, data: datos, loading: false, error: null };
        break;
      case "FETCH_ERROR":
        return {
          ...state,
          data: [],
          loading: false,
          error: Number(action.payload).toFixed(2),
        };
        break;
      case "UPDATE_DATA":
        return {
          ...state,
          data: state.data.map((item) => {
            if (item.id === action.id) {
              return { ...item, [action.property]: action.payload };
            }
            return item;
          }),
        };
        break;
      case "DELETE_FROM_VILLAGES":
        return {
          ...state,
          data: state.data.map((item) => {
            if (item.id === action.municipio_id) {
              return {
                ...item,
                [action.grupo]: item[action.grupo].filter(
                  (villa) => villa !== action.barrio
                ),
              };
            }
            return item;
          }),
        };
      break;
      case "RISE_PRICES":
        setValorPrevio(state);
        return {
          ...state,
          data: state?.data.map((item) => {
            const updatedItem = { ...item };
            const propertiesToUpdate = [
              "precioT1_poco",
              "precioT1_normal",
              "precioT1_grua",
              "precioT2_poco",
              "precioT2_normal",
              "precioT2_grua",
              "precioT3_poco",
              "precioT3_normal",
              "precioT3_grua",
            ];
            propertiesToUpdate.forEach((property) => {
              if (
                item[property] &&
                item[property] !== 0 &&
                item[property] !== "0"
              ) {
                if (action.operation_type === "porcentual") {
                  updatedItem[property] = (
                    Number(item[property]) +
                    (Number(item[property]) * action.vlue) / 100
                  )
                    .toFixed(2)
                    .replace(/\.00$/, "");
                  setPercentage("");
                }

                if (action.operation_type === "normal") {
                  updatedItem[property] = (
                    Number(item[property]) + Number(action.vlue)
                  )
                    .toFixed(2)
                    .replace(/\.00$/, "");
                  setNormal("");
                }
              }
            });
            return updatedItem;
          }),
        };
      break;
      case "ADD_VILLAGE":
        let villagesArray = action.villages.split(",").map(v=>v.trim().charAt(0).toUpperCase() + v.trim().slice(1));
        return {
          ...state,
          data: state.data.map((item,i) => {
            if (item.id === action.selected_municipio) {
              let villagescoincidence = villagesArray.filter(v => item[action.T].includes(v));
              villagesArray = villagesArray.filter(v => !item[action.T].includes(v));
              if (villagescoincidence?.length > 0) {
                let coincidentes = villagescoincidence.join(", ");
                console.log(`This message is appearing twice`);
   
              }
              return {
                ...item,
                [action.T]: [...(item[action.T].filter(e => e !== "") || []), ...villagesArray],
              };
            }
            return item;
          }),
        };
      break;
      default:
        return state;
    }
  }
Germán
  • 1,007
  • 1
  • 7
  • 20

0 Answers0