Tengo una respuesta API que devuelve una lista de registros, cada uno con un atributo de 'estado'. El estado puede ser 'actual', 'anterior', 'nunca'.

Tengo un conjunto de 3 casillas de verificación que tienen un valor igual al que un usuario haría clic para filtrar la lista de registros en consecuencia.

La forma en que intento lograr la funcionalidad de filtrado es mediante el uso de un gancho para const [statuses, setStatuses] = useState<string[]>([]);

Y luego llenar esa matriz con el valor de cada casilla de verificación de:

<div>FILTER BY STATUS</div>
 <FilterSection>
  <span><input type="checkbox" value="Current" onClick={handleStatusChange}/> Current</span>
  <span><input type="checkbox" value="Former" onClick={handleStatusChange}/> Former</span>
  <span><input type="checkbox" value="Never" onClick={handleStatusChange}/> Never </span>
 </FilterSection>
</div>

Luego tengo el método onClick que llama a handleStatusChange:

  const handleStatusChange = e => {
    setStatuses([...statuses, e.target.value]);
    props.onFilterChange(statuses, state)
    console.log('status value: ', e.target.value)
  };

Lo que pasa sus valores al componente contenedor y se alimenta a la función de filtro que se ve así:

  const handleFilterChange = (status: string[], state: string) => {
    store.set('currentPage')(0);
    const allLocations = store.get('locations');
    let filteredLocations = allLocations.slice();
    const pageSize = store.get('pageSize');

    if (status && status.length > 0) {
      filteredLocations = filteredLocations
        .filter(l => {
          l.financialDetails && l.financialDetails.locationStatus === status;
        })
        .slice();
    }

    store.set('filteredLocations')(filteredLocations);
    const pagedLocations = filteredLocations.slice(0, pageSize);
    store.set('pagedLocations')(pagedLocations);
    store.set('locationsLoading')(false);
  };

El problema que veo es que aparece un error de TypeScript dentro de handleFilterChange que dice This condition will always return 'false' since the types 'string' and 'string[]' have no overlap.

EDITAR He actualizado la función handleStatusChange y está completando la matriz, pero solo con el segundo clic de una casilla de verificación. Entonces, en el primer clic, produce una matriz vacía, en el segundo clic toma el valor que se hizo clic primero y lo empuja a la matriz para que siempre esté un clic detrás de lo que un usuario realmente seleccionó.

0
Josh 10 feb. 2020 a las 21:24

2 respuestas

La mejor respuesta

Creo que algo como esto funcionaría.

const handleStatusChange = e => {
  const status = e.target.value;

  if (!statuses.includes(status)) {
    setStatuses(statuses.concat(status));
  }
  else {
    const statusIndex = statuses.findIndex(status);
    statuses.splice(statusIndex, 1);
    setStatuses(statuses);
  }

  props.onFilterChange(statuses)
};

Y para el mangoFilterChange ...

  const handleFilterChange = (statuses: string[]) => {
    const allLocations = store.get('locations');
    let filteredLocations = allLocations.slice();

    if (statuses && statuses.length) {
      statuses.forEach((status) => {
        filteredLocations = filteredLocations
          .filter(l => (l.financialDetails && l.financialDetails.locationStatus !== status));
    }

    const pagedLocations = filteredLocations.slice(0, pageSize);
  };

Eliminé parte del código que pensé que era irrelevante para el problema.

1
Jason 10 feb. 2020 a las 21:06
  const handleStatusChange = e => {
    const updatedStatus = [...statuses, e.target.value];
    props.onFilterChange(updatedStatus, state)
    setStatuses(updatedStatus);
    console.log('status value: ', e.target.value)
  };

Siempre debe llamar a parent (función de accesorios) para pasar el estado a parent porque cuando llama a setStatuses en ese momento, la matriz de estados está vacía, así que llame a ese props.onFilterChange primero antes de configurar el estado.

O en un componente funcional puedes usar useEffect así

useEffect(()=>{
   props.onFilterChange(statuses, state);
},[statuses]);
0
Shabab Qaisar 10 feb. 2020 a las 20:24