estoy pasando valores usando reaccionar redux todo se pasa pero el componente que quiero renderizar solo se renderiza 1 vez y cuando guardo mi código en vscode (se renderiza de nuevo) los datos se renderizan en la página como debería
return ( <div className='fav-container' id='favorites'> {FavoritesData.data.length === 0 ? ( <h5>You Don't Have Any Favorites Yet!</h5> ) : ( <div className="favorites-grid">{FavoritesData.data.map((item) => <Favorite item={item} />)}</div> )} <button onClick={() => console.log(FavoritesData.data.length)}></button> </div> );en el registro, los datos se actualizan pero la función trenaria no se activa, lo mismo ocurre con useEffect
¿Está sobrescribiendo datos o simplemente actualizándolos? Si solo está actualizando en el lugar, la referencia no cambiará. No tengo suficiente información para hacer este diagnóstico, pero sospecho que está viendo el mismo comportamiento en React que vería aquí:
// in the example below, the two variables are essentially storing the exact same array, not copies of the same array const myArr = [1, 2, 3]; // storing a reference to the myArr array const myOtherArr = myArr; myOtherArr.push(4); console.log(myArr); // prints [1, 2, 3, 4] // in this example, the arrays are different const myArr = [1, 2, 3]; // store a copy of all the values from myArr in a new array literal const myOtherArr = [...myArr]; myOtherArr.push(4); console.log(myArr) // prints [1, 2, 3] En React, que impone un enfoque funcional, querrá sobrescribir FavoritesData.data por completo; de lo contrario, la referencia en realidad no cambiará y React pensará que está mirando exactamente la misma matriz. Si sospecha que se trata de un diagnóstico erróneo o si todavía tiene preguntas, publique el código que actualiza FavoritesData.data y actualizaré mi respuesta.
El problema no está en actualizar los valores, el problema no está en recorrer los componentes.
Lo actualizo con redux, reductor:
case 'ADD_FAVORITES': state.data.push(action.payload) return state case 'DEL_FAVORITES': let favoritesArr = [ ...state.data ]; state.data = favoritesArr.filter(fav => fav.cityName !== action.payload.cityName); return state default: return state } } El clic useEffect en el otro componente
useEffect(() => { const fav = { cityName:CityData.EnglishName, TemperatureMetricValue:WeatherData.TemperatureMetricValue, TemperatureImperialValue: WeatherData.TemperatureImperialValue, WeatherText: WeatherData.WeatherText} const FavoritesPromise = async (favorites) => { return favorites; } isClick ? FavoritesPromise(fav) .then(data=>{ dispatch(addFavorites(data)) localStorage.setItem('location',JSON.stringify(FavoritesData.data)) }) .catch(err => console.log(err)) : FavoritesPromise(fav) .then(data=>{ FavoritesData.data.map((item) => { if(item.cityName == CityData.EnglishName){ dispatch(delFavorites(item)) localStorage.setItem('location',JSON.stringify(FavoritesData.data)) } }) }) .catch(err => console.log(err)) },[isClick])Ahora, cuando trato de devolver el valor al html, no lo representa, pero cuando registro los valores, parece que lo está pasando.
return ( <div className='fav-container' id='favorites'> {FavoritesData.data.length === 0 ? ( <h5>You Don't Have Any Favorites Yet!</h5> ) : ( <div className="favorites-grid">{FavoritesData.data.map((item) => <Favorite item={item} />)}</div> )} Cuando registro la longitud que está cambiando, probé la misma lógica con useEffect cuando la longitud cambia y no se activa también.
<button onClick={() => console.log(FavoritesData.data.length)}></button> </div> ); };