0

Estoy aplicando Typescript y Reducers en un proyecto simple pero no puedo hacer que cuando borro un dato del array de objetos pueda actualizar el state. El error:

Type '{ newData: Contactos[]; contacts: Contactos[]; }' is not assignable to type 'ContactsState'. Object literal may only specify known properties, and 'newData' does not exist in type 'ContactsState'.

Esta tomando como una propiedad a newData

   import React from 'react';

interface Contactos {
  id: number;
  name: string;
  email: string;
  phone: string;
}

interface ContactsState {
  contacts: Contactos[];
}

type ContactsReducerAction = {
  type: 'delete';
  payload: {
    id: number;
  };
};

const INITIAL_STATE = [
  {
    id: 1,
    name: 'John Doe',
    email: '[email protected]',
    phone: '555-555-5555',
  },
  {
    id: 2,
    name: 'Karen Williams',
    email: '[email protected]',
    phone: '222-222-2222',
  },
  {
    id: 3,
    name: 'Henry Johnson',
    email: '[email protected]',
    phone: '111-111-1111',
  },
];

export const contactsReducer = (
  state: ContactsState,
  action: ContactsReducerAction
): ContactsState => {
  switch (action.type) {
    case 'delete': {
      let newData = state.contacts.filter(el => el.id !== action.payload.id);

      return {
        ...state,
        newData,
      };
    }

    default:
      return state;
  }
};

1 respuesta 1

1

Supongo que desea sobrescribir la lista Contactos con los datos filtrados. Está devolviendo una nueva propiedad llamada newData que claramente TypeScript no permitirá porque no es una propiedad definida en ContactsState. Se puede llegar a la solución haciéndolo de la siguiente manera:

export const contactsReducer = (
  state: ContactsState,
  action: ContactsReducerAction
): ContactsState => {
  switch (action.type) {
    case 'delete': {
      let contacts = state.contacts.filter(el => el.id !== action.payload.id);

      return {
        ...state,
        contacts,
      };
    }

    default:
      return state;
  }
};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.