No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Profesional de Next.js

Curso Profesional de Next.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Creaci贸n y cargado de datos para actualizar un producto

25/31
Recursos

Aportes 4

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

El problema en este caso ser铆a que podr铆amos colocar una ID que no exista y eso romper铆a la p谩gina. Para evitarlo podemos crear una constante notFound

const [notFound, setNotFound] = useState(false);

Luego crear un catch que, en el caso de que no encuentre la ID, cambie notFound a true

async function getProduct() {
			try {
				const response = await axios.get(endPoints.products.getProduct(id));

				if (response) {
					setProduct(response.data);
				}
			} catch (error) {
				console.log(error);
				setNotFound(true);
			}
		}

Y por 煤ltimo condicionar nuestro return al caso de que encuentre o no el ID

return notFound ? <div> Product Not Found </div> : <FormProduct product={product} />;

Mmm yo creo que falta agregar algo, el tema de category no funciona bien ya que en el llamado obtenemos un objeto m谩s no un id, aparte de que el defaultValue en el select no funciona, se me ocurri贸 una manera de solucionarlo, agregamos un ref a ese select, luego cuando se cargue el componente agregamos un useEffect que escuche el cambio del producto con un switch:

const categorySelect = useRef(null)

  useEffect(() => {
    switch (product?.category?.id) {
      case 1:
        categorySelect.current.children[0].selected = true
        break
      case 2:
        categorySelect.current.children[1].selected = true
        break
      case 3:
        categorySelect.current.children[2].selected = true
        break
      case 4:
        categorySelect.current.children[3].selected = true
        break
      case 5:
        categorySelect.current.children[4].selected = true
        break
      default:
        break
    }
  }, [product])

As铆, cuando cargue el component, lograremos que aparezca con la categor铆a correcta.

Para manejar el caso en el que el id que se manda por la URL no exista, modifiqu茅 el useEffect de [id].js de la siguiente manera:
En pages cre茅 un archivo llamado notFound.js para crear esa ruta.

React.useEffect(() => {
    //El id se obtendr谩 desde la URL
    const {id} = router.query;
    //Si la ruta a煤n no est谩 lista, entonces el id tampoco
    if (!router.isReady) return;
    //Funci贸n para obtener la info del producto a partir del id
    const getProduct = async () => {
      const response = await axios.get(endPoints.products.getProduct(id));
      return response;
    };
    //Si la promesa se resuelve, asignamos la data a product
    getProduct()
      .then((response) => setProduct(response.data))
      //Si el id no existe, mandamos a notFound
      .catch((err) => router.push('/notFound'));
  }, [router?.isReady]);

Y para arreglar el problema con el select de las categor铆as agregu茅 lo siguiente:

FormProduct.jsx

const categorySelect = React.useRef(null);
React.useEffect(() => {
    if (product) {
      categorySelect.current.children[product?.category.id - 1].selected = true;
    }
  }, [product]);

Al mostrar los datos del producto a editar, no se selecciona la categor铆a correspondiente, lo que hice fue usar los hooks 鈥useEffect鈥 y 鈥useState鈥 para obtener la categor铆a del producto:

const [categoryDefaultValue, setCategoryDefaultValue] = useState(1);

useEffect(() => {
	if (product) {
		setCategoryDefaultValue(product?.category?.id);
	}
}, [product]);

Y en el select de la categor铆a agregu茅 en el 鈥value鈥 (en el 鈥defaultValue鈥 no funciona):

<select
	value={categoryDefaultValue}
	onChange={(e) => setCategoryDefaultValue(parseInt(e.target.value))}

El 鈥onChange鈥 es necesario, si no se agrega marca un error en consola de que debes agregarlo, ya que has definido directamente el 鈥value鈥 del select.