score:0
issue
the img tag loads all the images fine for the first call however, the problem is that when i do another zipcode and clicked search, the texts updated, but the img tag (the weather images) did not update ( i.e. first search 91001 everything looks great, searched again for 95133, name changed to san jose but the weather forecast images did not update from 91001's to 95133's)
you always append forecast data to the forecast
state but only reference the first 8 elements.
response["daily"].foreach((day) => {
setforcast((forecast) => [
...forecast, // <-- shallow copy persists old forecast data
day["weather"][0]["icon"]
]);
});
...
<img
src={`http://openweathermap.org/img/wn/${props.forecast[0]}@2x.png`}
alt="forecast image"
/>
...
<img
src={`http://openweathermap.org/img/wn/${props.forecast[1]}@2x.png`}
alt="forecast image"
/>
<img
src={`http://openweathermap.org/img/wn/${props.forecast[2]}@2x.png`}
alt="forecast image"
/>
<img
src={`http://openweathermap.org/img/wn/${props.forecast[3]}@2x.png`}
alt="forecast image"
/>
<img
src={`http://openweathermap.org/img/wn/${props.forecast[4]}@2x.png`}
alt="forecast image"
/>
<img
src={`http://openweathermap.org/img/wn/${props.forecast[5]}@2x.png`}
alt="forecast image"
/>
<img
src={`http://openweathermap.org/img/wn/${props.forecast[6]}@2x.png`}
alt="forecast image"
/>
<img
src={`http://openweathermap.org/img/wn/${props.forecast[7]}@2x.png`}
alt="forecast image"
/>
solution
to resolve, you should overwrite the forecast state when updating.
setforcast(response.daily.map((day) => day.weather[0].icon));
here's a "optimized" button click handler.
<button
onclick={async () => {
setloading(false);
const weather = await currentweather(zipcode, apikey);
setweatherdata(weather);
console.log(weather);
const forecast = await sevendayweather(
weather.coord.lon,
weather.coord.lat,
apikey
);
setforcast(forecast.daily.map((day) => day.weather[0].icon));
setloading(true);
}}
>
search
</button>
and for the sake of dry-ness, mapped forecast images.
{props.forecast.map((id, index) => (
<img
key={index}
src={`http://openweathermap.org/img/wn/${id}@2x.png`}
alt="forecast image"
/>
))}
Source: stackoverflow.com
Related Query
- ReactJS img not updating after API Call
- React is not updating the UI after receiveing data from the API call (using hooks)
- React hook not updating after the API call
- API response not updating after x seconds reactJS
- Not able to set the state in the ReactJS context API after AJAX call
- useState not updating variable after API call
- State not updating after axios call in react
- React state not updating after async await call
- Updating state after api call success
- ReactJS child component not updating after parent's state chaged
- Testing API Call in React - State not updating
- Type Error : destroy is not a function in Reactjs while call api async function in useEffect hook
- state not updating after AJAX call using setState()
- React - Redirect not working after api call
- ReactJS not rendering my API call results
- Redux toolkit state is not updating after API response
- useState not updating state object after fetching data from API endpoint
- React state not updating after function call
- Socket event after API call not recording data correctly in React app
- ReactJS element not updating after setState being called
- Loader not being shown after setting state inside a function used for api call
- useState not updating Array after calling API
- React error .map() is not a function after updating api data
- ReactJs does not generate data into view after calling api
- UseState change not triggering DOM update after API call
- REACTJS render method not updating after state update
- Component not updating after useEffect call
- ReactJS component won't update after first API call
- Why React not re-rendering components even if it's state changes after an API call
- ReactJS: useEffect not updating state value on API call
More Query from same tag
- How to edit row name while using ag-grid react
- Using Material-ui for creating an inline form with label,text, select and button elements (similar to Boostrap)
- how to group and sort an array of objects
- Unique refs for a list of elements
- Does react-admin confirmation dialogue accept more than two selection options? I'll like my dialogue box to contan "Yes", "Cancel", "No" options
- How can i display an element with a ternary operator
- The right approach to add window event listeners in the functional component
- A better way to implement axios interceptor
- Creating a table in react using multiple component calls not working
- Fading in/out scroller animation
- The component sc-global has been created dynamically warning
- How to override anchor <a> element in material ui v3?
- How can i get index from map using hooks?
- React enzyme not able to test click funtion
- Show <div> only if prop is defined
- How pass props to external async components in typeScript and reactQuery?
- Fixed position in a button in a scrollable view/component
- Material-ui V3 is not loading first tab for after fetch data (or page load)
- Reactjs form onSubmit is never called
- React: How to update the DOM with API results
- What is React.AsyncComponent class?
- Babel-register not transpiling React with Webpack
- Sending props to a map callback outside the class
- useEffect hook not firing on orientation change
- How to pass props and call functions from "parent" to "child" in stateless component reactjs
- Router only have one child component error
- Error using GSAP's scrollToPlugin with create-react-app
- Run a js file from reactjs application
- Type error while passing i18next instance to I18nextProvider
- React router links only works on refresh