score:2
Accepted answer
i think you just need to be using state properly:
export const overviewchart = () => {
type datevalue = {
x: number,
y: number
}
const [data, setdata] = react.usestate([]);
react.useeffect(() => {
let results = [];
const fetchfromurl = async() =>{
const response = await fetch(`${process.env.public_url}/tempdata/monthly.csv`)
const responsetext = await response.text();
const parsedresponse = readstring(responsetext);
parsedresponse.data.foreach(x => {
results.push( {x: number(new date(x[0])), y: number(x[1]) } )
})
setdata(results);
}
fetchfromurl();
}, []);
return(
<chart data={data} currentvalue={1840.87}/>
);
}
it should re-render automatically doing it this way, if not that i would just not render the chart until you have data:
return data.length ? (
<chart data={data} currentvalue={1840.87}/>
) : 'loading...';
score:0
- you need to put data onto state. for that, you need to rewrite the stateless component to inherit react.component. another way is to call forceupdate, which is not recommended.
- until the data are fetched, you need to render an empty component or loading spinner. once the fetch is successful, you need to call setstate and that will call render method again and draw charts correct.
score:1
you need to implement a loading verification on your component return. here is a simple-sample:
import react from 'react'
export const componentname = () => {
//react hooks
const [isloading, setisloading] = react.usestate(true)
const fetchfromurl = async() =>{
const response = await fetch(`your fetch`)
//other operations
//when job operations done loading is defined as false
setisloading(false)
}
fetchfromurl();
return(
!isloading? // = !(isloading === true) => false; when isloading false, return false
<component data={"data"} otherprops="props"/>
: null //or (not recommended)
//<loadingcomponent /> // (recomended) or
//<spinningloadingcomponent /> // (recommended)
// is recommended to see loading when user call this component
);
}
Source: stackoverflow.com
Related Query
- React component being called before fetch is complete
- React render() is being called before componentDidMount()
- componentDidMount() not being called when react component is mounted
- React props being mutated before setState called (react-beautiful-dnd)
- Pause function is being called inside react component but nothing happens
- react component render method being called twice for no reason
- React TransitionGroup lifecycle methods not being called when component is loaded
- `this` being undefined on object method when called as a react component prop
- Thunk Fetch is Undefined When Called from React Component
- React array being sorted before the function is being called
- React Fetch API Being Called Multiple Times on page load
- How to test window.open is being called from a react component
- React component being called twice due to React.StrictMode causing issues
- React fetch data before render class component
- Jest mock is not being called when testing a react component
- React Component State modified before setState called
- render method being called before API data is loaded in React
- Why is my component in React being called multiple times?
- React Function is not returning component after being called from onchange method
- React - Redux wait fetch result before render component
- How to fetch data before render functionnal component in react js
- How to stop React child component from loading before data from fetch call in parent is passed to it
- Detect Function If Being Called In Another Component in React
- React Redux action is being called before init
- constructor in React not being called upon component being instantiated
- React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function
- React Hooks Error: Hooks can only be called inside the body of a function component
- Why is `Promise.then` called twice in a React component but not the console.log?
- How to fetch data when a React component prop changes?
- Set loading state before and after an action in a React class component
More Query from same tag
- Prevent React-router-dom to refresh the page and reset the information entered on click
- React v15.0.0: Since that renderToString is deprecated, how to go about server-side rendering?
- react-dropzone - accessing files added by click not drop
- Visual studio code: how to automatically change the matching closing tag
- Table causing too many re-renders, React
- React Styled Components: Justify content does not work but align items & flex-direction do?
- Conditional logic jsx react
- Stateful Component with Typescript and react-redux: Argument of type 'typeof MyClass' is not assignable to parameter of type Component
- react-bootstrap-sweetalert has no styles at all
- Using regex in react router Route path prop
- How to share cached apollo-client data with another query
- Error: Can't resolve 'bootstrap.min.css' in React JS
- React app is published but images from the directory (/assets/images/) are missing
- Display a section of HTML codes when a certain data is present in the JSON data
- React.js: Onblur event fires every key press
- npx create-react-app my-app ERORR: rollbackFailedOptional
- How to conditionally import a SCSS stylesheet in Next.js?
- React Mock Testing useNavigate
- Progress bar with redux
- Meteor React - Publish / Subscribe not working
- React input fields not showing when Add button clicked
- How to Filter React Bootstrap Cards using onClick()
- Set a default ref value on React?
- SVG convert <g> tag to an <image> tag containing base64 PNG URI (read more)
- How to get the table column width after render in react?
- React hook not updating the state within the hook
- Material UI v5 Align Inline Typography Component to the right
- how to use separate validation form in react js
- react-sortable-hoc reactJS library sorting issue
- React Native Firebase fetch data