score:6
Accepted answer
you call drawtable
in the render method, which causes a fetch request. when this completes, you put the response in state with setstate
which causes your component to re-render, and it continues like this indefinitely.
you could instead get the data in componentdidmount
and componentdidupdate
and just use the data in the render method.
example
class mycomponent extends react.component {
// ...
componentdidmount() {
this.fetchdata();
}
componentdidupdate(prevprops) {
const [, prevday, prevmonth, prevyear] = prevprops.type;
const [, day, month, year] = this.props.type;
if (prevday !== day || prevmonth !== month || prevyear !== year) {
this.fetchdata();
}
}
fetchdata = () => {
const [, day, month, year] = this.props.type;
const url = `http://localhost:${react_port}/old/${day}/${month}/${year}`;
fetch(url)
.then(response => response.json())
.then(data => {
this.setstate({ data });
})
.catch(error => {
console.error(error);
});
};
render() {
// ...
}
}
Source: stackoverflow.com
Related Query
- ReactJS fetch causes infinite loop
- Why do my fetch request causes an infinite error loop in ReactJs using React Toast Notifications
- setState method causes infinite loop of Results in Reactjs Functions
- How to do fetch with React Hooks; ESLint enforcing `exhaustive-deps` rule, which causes infinite loop
- Failed fetch causes infinite component life-cycle loop
- ReactJS - use localStorage as a dependency for useEffect causes infinite loop
- Reactjs unexpected infinite loop with render
- React hooks, set return value of a function to state causes infinite loop
- Adding exhaustive dependencies into useEffect and useCallback causes infinite loop
- ComponentDidUpdate SetState ReactJS Infinite loop
- Adding dependency in useEffect hook causes infinite loop
- loop fetch in reactjs
- React useEffect infinite loop fetch data axios
- React simple fetch program run into an infinite loop
- Custom react hook causes infinite loop
- React redux reducer as UseEffect dependency causes infinite loop
- useEffect on infinite loop using async fetch function
- Setting context from child causes infinite call loop
- Reactjs router onEnter hook authentication cause infinite loop
- REACTJS Error: Too many re-renders. React limits the number of renders to prevent an infinite loop
- heroku react appcache file causes infinite loop
- reactjs Avoid Infinite loop using the useState and useEffect
- Filtering react component state causes infinite render loop
- UseEffect and useCallback still causes infinite loop in react project
- Infinite loop when fetch data in middleware
- React: Invoking function with parameters causes infinite loop
- React useState with an empty object causes an infinite loop
- setState causes infinite loop even though it is outside render function
- React form validation hook causes infinite re-render loop
- Fetch creating infinite loop
More Query from same tag
- React and Express iTunes Search API :: Error: Request failed with status code 404
- Passing an object property through a variable in spread operator
- Reactjs rendering twice
- Simplifying a GeoJson FeatureCollection using mapshaper causes issues
- How do I customize Material UI in React?
- Redirect and send data from Node server back to React
- State is defined in "ComponentDidMount" but undefined in render
- Right way to update data in ReactJS
- let useEffect watch a condition and have it trigger only once
- Mutiple ReactDOM.render functions?
- .map not working on array of objects in react
- how we can sort table as costume ordered values?
- how to capture event on select tab
- Cascade Dropdown using react Hooks
- Problem with props.children in typescript useContext
- ReactJS: How to use boolean values in radio buttons?
- Why, with ReactJS, am I failing to make checkboxes that react to being clicked?
- React component doesn't change state when react router remounts it
- React Native - How to perform a really soft vibration?
- Screen reader skips new inserted elements
- How to adjust image dimensions within parent container?
- React how to remove listners correctly in componentWillUnmount, why do I need the bind in the constructor?
- Redux form "submiting" value not goes true on form submit
- Is it a way to use Next.js and WordPress pages under the same domain?
- React props value is undefined
- How can I host my React application using GitHub?
- Shorter way to mapDispatchToProps using React, Redux and TypeScript?
- React - Pass prop without a value
- how to get data from form to redirect SimpleForm edit
- Having errors deploying Node server to heroku