1

Estoy intentando filtrar los datos que traigo desde una API que guardo en una variable de estado llamada user, pero cuando intento usar la propiedad filter de la siguiente manera

let suscriptores=user.filter(Subscribed=>Subscribed==="yes")
console.log(suscriptores)

Me sale el siguiente error:

TypeError: Cannot read property 'filter' of undefined

¿Cual podria ser el problema al querer filtrar los datos?

Llamado de los datos:

const url='/api/users';
const[user, setuser]= useState();

useEffect(()=>{
    const getUsers=async()=>{

            const response =await axios.get(url);
            setuser(response.data.data.datos);

    }
    getUsers();
},[]);

json

"data":{
    "datos": [
            {
                "id":1,
                "Name":"Alissa",
                "Age": 45,
                "Adress": "Brooklyn 405",
                "Phone": "212-324-4153",
        "Subscribed":"yes"
            },
            {
                "id":2,
                "Name":"Ellis",
                "Age": 23,
                "Adress": "Boston 955",
                "Phone": "212-324-4152",
        "Subscribed":"yes"
            },
            {
                "id":3,
                "Name":"Martha",
                "Age": 21,
                "Adress": "Boston 955",
                "Phone": "212-324-4152",
                "Subscribed":"no"
            }
    ]
}
6
  • El error está claro, tu variable user está undefined. Yo imprimiría response.data.data.datos para ver qué valor tiene porque tiene pinta de que esa última propiedad .datos no existe en response.data.data. Otro posible problema es que estás inicializando user sin valor inicial (undefined) -> const[user, setuser]= useState();. Si inicializas la variable con array vacío conconst[user, setuser]= useState([]); estarás metiendo un santity check para evitarte este tipo de problemas
    – Kiko_L
    el 25 ago. 2020 a las 15:06
  • Si imprimo response.data.data.datos si me muestra los datos response.data.data.datos [{...},{...},{...}]
    – senseilex
    el 25 ago. 2020 a las 15:17
  • En donde estas aplicando filter? En otro componente? Donde está ubicada la variable suscriptores?
    – Juan Marco
    el 25 ago. 2020 a las 15:37
  • Si todo esta dentro del mismo componente
    – senseilex
    el 25 ago. 2020 a las 15:53
  • Prueba a inicializar el useState con array vacío
    – Kiko_L
    el 25 ago. 2020 a las 16:24

1 respuesta 1

1

El problema, es que el request hacia una API es asíncrono por naturaleza. Siempre hay una demora hasta que la información relevante es recuperada.

Y como users es null hasta que el request de API termina, la función filter queda undefined.

Para evitar esto, podemos usar && para ejecutar la función filter cuando users tenga la información relevante.

Ademas, a la función filter le está faltando acceder a la propiedad relevante (vos definiste el parámetro como Subscribed cuando eso es la propiedad en cuestión que quieres verificar).

Y por último usamos renderizado condicional para mostrar la información relevante:

const App = () => {
  const [users, setUsers] = React.useState(null);
  
  const suscriptores = users && users.filter(u => u.Subscribed === 'yes')
  

  React.useEffect(() => {
    simulateAPI.then((d) => {
      setUsers(d.data.datos);
    });
  }, []);
      
  return (
    <div>
      {!suscriptores ? (
        <p>Cargando..</p>
      ) : (
        <p>Suscriptores: {JSON.stringify(suscriptores)}</p>
      )}
    </div>
  );

}

ReactDOM.render(<App />, document.getElementById("root"));

// Simulamos el comportamiento de un API request
const json = {
  data: {
    datos: [
      {
        id: 1,
        Name: "Alissa",
        Age: 45,
        Address: "Brooklyn 405",
        Phone: "212-324-4153",
        Subscribed: "yes"
      },
      {
        id: 2,
        Name: "Ellis",
        Age: 23,
        Address: "Boston 955",
        Phone: "212-324-4152",
        Subscribed: "yes"
      },
      {
        id: 3,
        Name: "Martha",
        Age: 21,
        Address: "Boston 955",
        Phone: "212-324-4152",
        Subscribed: "no"
      }
    ]
  }
};



const simulateAPI = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(json);
  }, 1500);
});
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

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.