Proyecto en React | midudev - Aprende y Mejora en Programación JavaScript | Page 1

gritty bramble Jan 26, 2023, 4:47 PM

#

App.jsx

import { useState } from 'react';
import { ItemSearch } from './components/ItemsSearch/ItemSearch';
import Search from './components/Search/Search';

function App() {
const [results, setResults] = useState([]);
  return (
    <>
      <Search setResults={setResults} />
      <ItemSearch results={results} />
    </>
  );
}

export default App;

#

Search.jsx

import React, { useState } from 'react';
import { fetchResults } from '../API/Service';
import { ItemSearch } from '../ItemsSearch/ItemSearch';
import './search-styles.css';
import '../../index.css';

const Search = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = async () => {
    const data = await fetchResults(searchTerm);
    setResults(data);
  };

  return (
    <header>
      <nav>
        <div className="search__container">
          <img src="../../../public/assets/Logo_ML.png" className="icon__ml" alt="logo-ML" />
          <input
            type="text"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="input__search"
            placeholder="Nunca dejes de buscar"
          />
          <button type="submit" onClick={handleSearch} className="btn__search">
            <img src="../../../public/assets/ic_Search.png" alt="icon-search" />
          </button>
        </div>
      </nav>
      {results.slice(0, 4).map((result) => (
        <ItemSearch
          key={result.id}
          img={result.pictures.url}
          price={result.price}
          title={result.title}
          state={result.seller_address.state.name}
        />
      ))}
    </header>
  );
};

export default Search;

#

ItemSearch.jsx

import React from 'react';
import './item-styles.css';
import '../../index.css';

const ItemSearch = ({ results }) => {
  return (
    <div className="items">
      <a href="#">
        <img src={results.img} alt="img-product" className="img__product" />
      </a>
      <div className="box">
        <div className="box-2">
          <span className="price">{results.price}</span>
          {/* <img src={icon} alt="shipping" /> */}
        </div>
        <a href="#" className="description">
          {results.title}
        </a>
        <span className="province__product">{results.state}</span>
      </div>
    </div>
  );
};

export { ItemSearch };

jovial smelt Jan 26, 2023, 4:50 PM

#

En search no usas el setResults de las props

gritty bramble Jan 26, 2023, 4:51 PM

#

Me olvidé de descomentarlo del texto, pero igual, sigue sin funcionar

jovial smelt Jan 26, 2023, 4:51 PM

#

gritty bramble Me olvidé de descomentarlo del texto, pero igual, sigue sin funcionar

No, debes usar el que viene por props

#

Search = ({setResults})

#

por lo que veo results es un array

jovial smelt Jan 26, 2023, 4:52 PM

#

gritty bramble ItemSearch.jsx ``` import React from 'react'; import './item-styles.css'; impor...

aca lo usas como si fuera un objeto

#

tienes que hacer un results.map((result) => //tu jsx)

#

si haces [...todos tus resultados].title no accedes a nada, te devolvera undefined

#

porque estas accediendo a la propiedad en el array no en el objeto

#

ah no espera

#

es que es dificil leer el codigo desde discord XD

gritty bramble Jan 26, 2023, 4:54 PM

#

Me perdí xd

#

Jajajajaja

jovial smelt Jan 26, 2023, 4:54 PM

#

ya vi donde usas el ItemSearch

gritty bramble Jan 26, 2023, 4:54 PM

#

El problema está en el componente ItemSearch entonces?

jovial smelt Jan 26, 2023, 4:54 PM

#

ok ya entendi tu problema, el primero es usar el setResults de las props

#

asi puedes obtener los resultados en App.jsx

jovial smelt Jan 26, 2023, 4:55 PM

#

gritty bramble El problema está en el componente ItemSearch entonces?

vamos por partes, hay varios problemas

jovial smelt Jan 26, 2023, 4:55 PM

#

jovial smelt asi puedes obtener los resultados en App.jsx

haz un console.log en App.jsx a results para estar seguros de que llega alli la informacion

gritty bramble Jan 26, 2023, 4:59 PM

#

 App() {
  _s();
  const [results, setResults] = useState([]);
  return /* @__PURE__ */ jsxDEV(Fragment, { children: [
    /* @__PURE__ */ jsxDEV(Search, { setResults }, void 0, false, {
      fileNam…
App.jsx:15 ƒ App() {
  _s();
  const [results, setResults] = useState([]);
  return /* @__PURE__ */ jsxDEV(Fragment, { children: [
    /* @__PURE__ */ jsxDEV(Search, { setResults }, void 0, false, {
      fileNam…

#

me lanza eso en consola @jovial smelt

jovial smelt Jan 26, 2023, 5:09 PM

#

lmao

#

console.log de results?

jovial smelt Jan 26, 2023, 5:10 PM

#

gritty bramble App.jsx ``` import { useState } from 'react'; import { ItemSearch } from './comp...

ah mira, los hooks, solo pueden ser llamados dentro de componentes de react

#

no puedes usar hooks fuera de una funcion

gritty bramble Jan 26, 2023, 5:11 PM

#

jovial smelt ah mira, los hooks, solo pueden ser llamados dentro de componentes de react

Ese es otro error que solucioné también, perdón, ya lo actualizo xd jajaja

jovial smelt Jan 26, 2023, 5:11 PM

#

gritty bramble Search.jsx ``` import React, { useState } from 'react'; import { fetchResults }...

asegurate de que este componente use el setResults que le estas pasando por props

jovial smelt Jan 26, 2023, 5:12 PM

#

gritty bramble App.jsx ``` import { useState } from 'react'; import { ItemSearch } from './comp...

Aca es donde debes hacer el console.log de results, antes del return

gritty bramble Jan 26, 2023, 5:15 PM

#

Esto e antes de dar el click en el boton de buscar

[]length: 0[[Prototype]]: Array(0)
VM2315 installHook.js:1861

Y este es el despues

react_devtools_backend.js:4012 The above error occurred in the <Search> component:

    at Search (http://127.0.0.1:5173/src/components/Search/Search.jsx?t=1674682836057:24:39)
    at App (http://127.0.0.1:5173/src/App.jsx?t=1674753160513:22:33)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

jovial smelt Jan 26, 2023, 5:16 PM

#

gritty bramble Esto e antes de dar el click en el boton de buscar ``` []length: 0[[Prototype]]:...

Primero te muestra que es un array

#

y despues se rompe

gritty bramble Jan 26, 2023, 5:16 PM

#

sumado a estos 4 errores que me tira en errores

📎 message.txt

gritty bramble Jan 26, 2023, 5:16 PM

#

jovial smelt Primero te muestra que es un array

despues sigue estando el array, vacio

#

y abajo ese error que te pasé

jovial smelt Jan 26, 2023, 5:17 PM

#

ok es un error distinto

#

lo que dice es que pictures no existe

#

mejor dicho, pictures.url no existe

#

dice que esta tratando de leer las propiedades de pictures, pero pictures resulto ser undefined

jovial smelt Jan 26, 2023, 5:18 PM

#

gritty bramble Search.jsx ``` import React, { useState } from 'react'; import { fetchResults }...

Aca, si quieres comenta/borra el results.slice..., todo eso para ahorrarnos ese error de momento y hazle console.log a data

gritty bramble Jan 26, 2023, 5:23 PM

#

Search.jsx

const Search = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  const handleSearch = async () => {
    const data = await fetchResults(searchTerm);
    setResults(data);
    // iría acá?
    console.log(data)
  };

Te pregunto porque lo puse ahí y no me tira nada

jovial smelt Jan 26, 2023, 5:24 PM

#

es undefined?

jovial smelt Jan 26, 2023, 5:24 PM

#

gritty bramble Search.jsx ``` const Search = () => { const [searchTerm, setSearchTerm] = use...

colocalo antes a ver, porque setResults disparara un render

gritty bramble Jan 26, 2023, 5:26 PM

#

Antes del setResults(data)?

brisk raft Jan 26, 2023, 5:26 PM

#

gritty bramble Search.jsx ``` const Search = () => { const [searchTerm, setSearchTerm] = use...

Puede que ser fetch Results sería inherente pero que hace, usa fecth o axios xd

gritty bramble Jan 26, 2023, 5:27 PM

#

brisk raft Puede que ser fetch Results sería inherente pero que hace, usa fecth o axios xd

Uso fetch

#

La API está en otro componente

brisk raft Jan 26, 2023, 5:28 PM

#

gritty bramble La API está en otro componente

Y tienes el .json()

#

Por si acaso solo pregunto

gritty bramble Jan 26, 2023, 5:28 PM

#

Sisi

#

Porque la API funciona

#

Antes me tiraba la info en una lista que hice solo para ver si funcionaba

#

Pero yo necesito que funcione en el componente de los ítems

#

Entonces le pasé ItemSearch cómo etiqueta en el jsx de Search y ahora no me tira la info

brisk raft Jan 26, 2023, 5:30 PM

#

Oka

gritty bramble Jan 26, 2023, 5:30 PM

#

Para mí el problema está en el componente de los ítems

#

Porque el Search funcionaba sin los ítems

#

Dejó de funcionar cuando conecté los dos componentes

brisk raft Jan 26, 2023, 5:31 PM

#

Si querés vamos a un canal de voz y transmites seria más fácil

gritty bramble Jan 26, 2023, 5:32 PM

#

Dale, puede ser en un rato, todavía no comí, cuando termino te etiqueto y lo vemos, puede ser?

brisk raft Jan 26, 2023, 5:32 PM

#

oka

brisk raft Jan 26, 2023, 6:06 PM

#

XD

#

ya entendi el problema

#

el problema esta en estas pasando props de forma individual

#

aqui:

#

y itemSearch solo recive una

#

por ende simpre dara undefined dentro del componente

#

hice una simulacion

#

results.slice(0, 4).map((result) => (
        <ItemSearch
          key={result.id}
          results={result}
        />
      ))

#

solo debes corregir eso en el componente Search

#

y listo ya se renderizara

#

gritty bramble Jan 26, 2023, 6:14 PM

#

Ahora lo pruebo, muchas gracias por tomarte el tiempo de verlo. Ahora te aviso que tal

gritty bramble Jan 26, 2023, 6:37 PM

#

@brisk raft ahi funciona, te lo re agradezco, no sabes, estuve 2 dias y hoy con esto, muchas gracias en serio, ya estaba re frustrado jajaja

brisk raft Jan 26, 2023, 6:40 PM

#

2 dias, really😐

gritty bramble Jan 26, 2023, 6:44 PM

#

si

#

estuve arreglando muchos errores

#

y ese era un o que no podia solucionar

#

hace poco estoy con react

#

pero ya con esto me llevo un gran aprendizaje xd

brisk raft Jan 26, 2023, 6:54 PM

#

en todo caso hubieses usado desestructuración

gritty bramble Jan 26, 2023, 6:58 PM

#

La usé

#

Pero no funcionaba

#Proyecto en React