3
No hay ningún error, solo hay que revisar los conceptos de asincronia y saber como manejar las respuestas asincrónicas.
El propósito de una Promesa es manejar operaciones asincrónicas usando funciones de continuación , el método fetch regresa una promesa.
Observa el diagrama que viene en el enlace, ahí veras que ya tienes la promesa con estatus pendiente, ...
respondida el 9 feb. a las 6:02
g.4
1,19822 medallas de oro44 medallas de plata1313 medallas de bronce
3
El error te está diciendo que falló el preflight, que es un request de tipo OPTIONS que precede a un request cuando entran en juego las reglas de Cross Origin Resource Sharing (CORS).
En ese preflight el servidor no respondió con las cabeceras necesarias para hacer siquiera el intento de proseguir con el flujo.
¿Por qué tu otra petición no tuvo el mismo ...
2
Si, esto ocurre porque cuando llamas la función asignas el estado de react con la imagen de elemento en que hiciste click, por lo tanto React re-renderiza tu componente y los actualiza todos con la misma imagen.
Si ya tienes tus datos que tienen el URL no necesitas meterte con el
estado de tu componente. Cuando haces el map ya tienes acceso a
las URLs ...
respondida el 29 ene. a las 16:59
FranAcuna
2,62111 medalla de oro33 medallas de plata1616 medallas de bronce
2
El bucle forEach no esta retornando nada, por lo que tu item se pierde, para solucionarlo agrégale un return
console.log(data);
// Me muestra mis objetos, los datos llegan
return (
<section className='productsContainer'>
{data.forEach(function(item){
return <li> <ProductCard brand={item.data.brand} model=...
2
Al ser una función asíncrona, no puedes recuperar directamente el valor como lo estas intentando, puedes conseguirlo mediante un Promise, así:
export default class Distance {
getPos() {
navigator.geolocation.getCurrentPosition((position) => {
console.log(position);
})
}
getPos2() {
return new Promise((res) ...
1
Yo lo haria con un Stateless component y usando hooks:
import React, { useState } from "react";
export default function Hamburguer() {
const [active, setActive] = useState(false);
return (
<button className={`hamburger hamburger--minus ${active ? 'is-active' : ''}`} type="button" onClick={() => setActive(!active)}&...
1
llámalo desde props y lo instancias por destructuring
const CompleteInfo = () => {
const [ahook,setTheHook]=useState(0)
/* other code*/
if(ahook==0){
return(<Child ahook={ahook} setTheHook={setTheHook}></Child>);
}
if(ahook==1){
return(<Child2 ahook={ahook}></Child2>);
}
...
1
Con ReactJS es posible devolver (render) el mismo árbol de elementos vDOM en repetidas ocasiones (re-render), esto permite repensar la forma de diseñar Componentes Web.
Versión JS DOM
En la version JS DOM del Componente Web de @gerarca, se necesita accesar al elemento div con getElementById, esto con la finalidad de transformar el valor de su propiedad style....
respondida el 13 feb. a las 6:17
g.4
1,19822 medallas de oro44 medallas de plata1313 medallas de bronce
1
Te falta el .default en el require, de todas formas yo lo haría mediante una función, asi:
const loadImage = imageName => (require(`../Assets/images/Home/${imageName}`).default);
Y donde quieras mostrar una imagen:
<img src={loadImage("image.jpg")} alt="img" />
En tu caso sería loadImage(slide.picture)
1
Siguiendo tu ejemplo si el icono lo importas así:
import {FaIconName} from 'X';
Y lo puedes renderizar como un componente:
<div><FaIconName /></div>
Puedes guardarlo en item así:
item:{
path:"path",
title:"title",
icon: <FaIconName />
}
Y renderizarlo como si fuera una prop mas:
export function SidebarItem(...
1
Si estas usando react-router solo tienes que renderizar el nav antes de definir tus rutas, algo así:
<Nav />
<Switch>
<Route path="/path1" component={Component1} />
<Route path="/path2" component={Component2} />
</Switch>
De este modo cuando accedas a /path1 se mostrará primero el Nav y depues el ...
1
Una forma puede ser envolver Toast en curly braces {} para poder usarlo como una expresión javascript:
function App(){
function test(){
console.log(Toast({title: 'notification'}));
}
return (
<div>
<button onClick={test}>test</button>
{/*Toast({title: 'notification'})*/}
</div>
)
}
const Toast = (...
respondida el 11 feb. a las 0:18
g.4
1,19822 medallas de oro44 medallas de plata1313 medallas de bronce
1
Te comparto lo que observé después de revisar el caso.
La propiedad pattern del elemento input, llega como string por medio del evento, aunque sigue siendo un objeto regEx desde props:
validar = e => {
//aqui hay un String
console.log(typeof e.target.pattern)
console.log("e.target.pattern", e.target.pattern)
//aqui hay un regex ...
respondida el 15 feb. a las 17:57
g.4
1,19822 medallas de oro44 medallas de plata1313 medallas de bronce
1
Según comentas:
Hasta ahora en el "componente" enviaba una url para mostrar una
imagen.
La prop "componente" esta preparada para recibir un string y ahora le estas enviando un componente.
Habría que ver que se hace con el object "popup"
const popup = {
text: {
title,
},
component: <Image type={component} /...
1
En el tutorial, se están usando stateful components y tu estas usando stateless components.
Los stateless components no tienen constructor, para manejar propiedades, lo puedes hacer mediante hooks (useState).
Aquí se explica bastante bien:
https://medium.com/@cgcrutch18/stateful-vs-stateless-react-components-13f647f7fc4
Para que te funcione como en el ...
1
Parece que falta decirle a React que controle el componente checkbox, esto se hace mapeando el valor de la propiedad de estado value, en la propiedad value del checkbox:
function App() {
const [value, setValue] = React.useState(0);
const [price, setPrice] = React.useState(8);
const [plan, setPlan] = React.useState("10k");
...
respondida el 9 feb. a las 2:52
g.4
1,19822 medallas de oro44 medallas de plata1313 medallas de bronce
1
Es porque para Javascript eso es una cadena de texto y no un SVG
Debes guardar el SVG como tal en un archivo y despues importarlo
import imgagenSVG from './ruta/archivo.svg';
y ahora si ya puedes usarlo en tu html
<img src={imagenSVG} />
Basandome en tu comentario, lo que deberas hacer es guardar el SVG en base64, hay servicios en internet que te ...
1
Según el ejemplo que diste, en src/components/form.js, línea 13:
updateState({
...state,
...v
});
Reasignalo como:
updateState(Object.assign(state, v));
MDN Docs: Object.assign()
1
Intenta con esta versión del método handleEvaluate, en tu App:
handleEvaluate = () => {
const { currentValue } = this.state;
let resultToCast = eval(currentValue);
let fixedResult =
(resultToCast % 1 === 0)
? resultToCast.toFixed(0)
: resultToCast.toFixed(2);
this.setState({
currentValue: ...
respondida el 8 feb. a las 18:07
g.4
1,19822 medallas de oro44 medallas de plata1313 medallas de bronce
1
El problema es que se está usando la referencia equivocada, el handler se llama setIsVisibleModal y se esta pasando como setIsVisible al componente UsersActive:
<UsersActive
usersActive={usersActive}
setIsVisible={setIsVisibleModal}
setModalTitle={setModalTitle}
setModalContent={setModalContent}
/>
Luego, en el ...
respondida el 8 feb. a las 3:49
g.4
1,19822 medallas de oro44 medallas de plata1313 medallas de bronce
1
Te suecede esto porque esta pasando dos veces por donde capturas el evento, el "socket.on" y esto hace que se quede escuchando dos veces el evento.
Para asegurarte que solo pasa una vez, puedes utilizar un useEffect:
useEffect(() =>{
socket.on("connect", () => {
console.log("User connected!");
});
},[])
1
Le estás pasando un array vacio al setter del estado.
y le estas haciendo push al estado directamente..
lo que pienso yo que deberias hacer es:
const [prodArr, setProdArr] = useState([]);
useEffect(()=>{
// la coleccion es asincrona por eso debes meter la logica dentro del then:
db.collection(producto).get().then(function(...
1
El problema es que estás mezclando un componente de clase con un componente funcional (info).
En el código de tu pregunta tienes un componente funcional pero estás haciendo referencia a this que se usa en los componentes de clase para hacer referencia al propio componente. De ahí que te diga que no encuentra la función manejaClick porque this es undefined en ...
respondida el 3 feb. a las 20:50
Kiko_L
6,32511 medalla de oro99 medallas de plata2424 medallas de bronce
1
La configuracón actual del hook useEffect, es para que solo corra una vez (Skip effects):
React.useEffect(() => {
//tu codigo...
},[]);
El hook useEffect tiene una dependencia a la variable id, hay que especificarla en el dependency array:
React.useEffect(() => {
//tu codigo tiene dependencia a id...
//Variable para establecer en que ...
respondida el 2 feb. a las 21:00
g.4
1,19822 medallas de oro44 medallas de plata1313 medallas de bronce
1
Dado tu problema, podrías ir validando la entrada de los nuevos productos según su modelo por ejemplo. Entonces, si el usuario agrega 5 productos de un celular particular, agregas el elemento nuevo a una variable que se encargará de almacenar el producto siempre y cuando NO exista en ésta.
Un ejemplo
const addShopCart = (item, quantity) => {
const aux =...
respondida el 2 feb. a las 1:51
Paulo Urbano Rivera
3,75211 medalla de oro1212 medallas de plata2727 medallas de bronce
1
Actualización
En el ejemplo de la pregunta, se asignan funciones a otras variables, pero estas son solo las referencias, hace falta llamarlas para que se ejecuten:
<button
onClick={() => {
//function expression
const funcion1 = props.close;
const funcion2 = saludo("parametro");
const funcion3 = hola("parametro");...
respondida el 1 feb. a las 21:16
g.4
1,19822 medallas de oro44 medallas de plata1313 medallas de bronce
1
Lo que sucede es que marca la ruta en la url pero el contenido de la vista me lo renderiza en la misma vista de home
Con la configuración actual, cuando se quiere ocultar el componente Home enrutando hacia el componente Test, Home se vuelve a mostrar, pues esta posicionado encima de <Routes>, que es donde se especificó el contenido para cada ruta:
...
respondida el 1 feb. a las 3:12
g.4
1,19822 medallas de oro44 medallas de plata1313 medallas de bronce
1
Puedes pasar funciones como propiedades a tus componentes, además de configurar algunas propiedades en el objeto state para controlar cuándo se muestra el modal de un celular y pasar su id.
Hay 3 componentes que necesitan configuración:
App
Product
InformationProduct
App
Se modifica el constructor, agregando las siguientes propiedades productIndex y ...
respondida el 31 ene. a las 2:48
g.4
1,19822 medallas de oro44 medallas de plata1313 medallas de bronce
1
Como te menciona el error, te falta el return en el componente para poder renderizarlo en el DOM, lo mismo que le haces al componente App
const HotelCard = props => {
return (
props.hotelsData.map(/.../)
)
}
Con esto deberia bastar :D
respondida el 29 ene. a las 19:29
Paulo Urbano Rivera
3,75211 medalla de oro1212 medallas de plata2727 medallas de bronce
1
En react podrías importar la imagen simplemente de la siguiente manera
import homeImage from '../../assets/home/home-image.png';
y agregarla al source así:
<img src={homeImage}/>
Solo están habilitadas las respuestas de wiki más votadas con una longitud mínima y que no pertenecen a la comunidad
Etiquetas relacionadas
reactjs × 1832javascript × 793
nodejs × 162
react-native × 137
react-hooks × 98
redux × 78
json × 68
firebase × 68
html × 49
api × 47
css × 46
express × 44
axios × 44
react-redux × 43
react-router-dom × 42
typescript × 40
webpack × 40
npm × 38
bootstrap × 32
fetch × 32
jsx × 29
array × 28
react-navigation × 28
ecmascript-6 × 27
mongodb × 25