Comments (3)
I might need more context, however, maybe this issue could be fix adding an useEffect with a condition where if "goodPriceInfo" is true (which means there's data) you can set a new state and then use this new state to render the component below. Don't forget to add the "goodPriceInfo" as dependency to useEffect. Example:
useEffect(() => {
if(goodPriceInfo) {
setNewPriceInfo(goodPriceInfo)
}
}, [goodPriceInfo])
...
<SectionHeader title={newPriceInfo.title} subtitle={newPriceInfo.subtitle}></SectionHeader>
from react.
I think what you want is for react application to boot with the values of goodPriceInfo be defined for instace rather than being undefiend when the application starts it should be 15
the problem here is that useEffect get invoked(get called) after react page has rendered, which means it wait untill every thing (html,css,js) has been presented to you then it get invoked
if we go to your slice file we find the you made the inital state as next
initialState: {
goodPriceInfo: {
}
}
which mean that the first time react has loaded it found the value of goodpriceinfo to be {}(empty object) as you can see in the image you have attached to first time its empty object
then useEffect get invoked it runs the async function you provided redux detected that and tells react hey buddy a new state has been made i think you need to do something with it, react says oh yeah i need to log it to the developer using me so he serves you the newly fetched data
there is two solution the i though of for you problem
1- the easy one is to use server side rendering framework like next js which is going to invoke the function fetchHomeDataAction before the page load tells react about it then serves it to you
2- set the initial state value to undefined like this
initialState: {
goodPriceInfo: undefined
}
then l would assume you want to put the title in the div that have section-main as class name
<div className="section-main">
{goodPriceInfo && goodPriceInfo.title}
</div>
this means if goodPriceInfo is not defined then do nothing, but if is is defined but the value of title in there
its also equivalent to (if the previous syntax is hard to wrap you head around ):
<div className="section-main">
goodPriceInfo !== undefined ? goodPriceInfo : ""
</div>
another note check the spelling of the words you write ,if you are not sure google it , i have done it my self thousands of times
have a great day :)
from react.
Support requests filed as GitHub issues often go unanswered. We want you to find the answer you're looking for, so we suggest the following alternatives:
Coding Questions
If you have a coding question related to React and React DOM, it might be better suited for Stack Overflow. It's a great place to browse through frequent questions about using React, as well as ask for help with specific questions.
https://stackoverflow.com/questions/tagged/react
Talk to other React developers
There are many online forums which are a great place for discussion about best practices and application architecture as well as the future of React.
https://reactjs.org/community/support.html
from react.
Related Issues (20)
- Bug: React.memo fails to memoize component HOT 1
- UseEffect only works on localhost but not in production HOT 3
- [DevTools Bug]: React Dev Tools break gstreamer docs HOT 2
- Bug: hoisted stylesheets should not reorder when re-rendered in a transition
- Bug: exhaustive-deps lint should allow omitting unchanging values HOT 1
- Ability to turn off ‘Download DevTools’ console message HOT 4
- What does the community think of the war between Israel and Palestine? Will it donate to Palestine? HOT 5
- The left Sidebar is not scrolling on small Displays HOT 1
- Bug: React 18 Suspense with unstable value would trigger multiple rerenders
- Bug: flushSync on component having useLayoutEffect in some cases causes Maximum update depth exceeded HOT 1
- Bug: Stale values returned from useOptimistic when state changes HOT 11
- Bug: Re-rendering nested components breaks event listeners on parent HOT 3
- Bug: contentEditable attribute does not allow the 'plaintext-only' value HOT 3
- Bug: manipulating controlled input value breaks native validation HOT 4
- Sponsored issue: fix an issue
- Bug: Re-rendering nested components breaks event listeners on parent HOT 1
- Bug: Nested suspense boundaries `Cannot read properties of null (reading 'parentNode')` on resolution
- Bug: pending attribute from useFormStatus is stuck as "true" when form action takes longer than ~5s to resolve HOT 4
- React developer tools messes with Smartermail HOT 1
- Bug: Unable to build react repo locally in Mac HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.