score:0
please note that you are calling getdetails
method in render
. render is not a good place to add methods which modify the internal state. please check the react doc for additional details.
score:0
there are a lot of strange things there. first of all, getdetails
returns a promise, but the promise is not resolved anywhere. its usage should be something like:
getdetails()
.then(data => {
// do something with the data
}, error => {
// manage here the error
}):
also, this.state.data.map
should be this.state.data.foreach
and delete the return
from inside, because you don't need to return anything outside
on the other hand, there's an issue with getcountries
. its name sais it's a get, but the api call sends a post.
after that's clarified, inside getdetails
you're using the data retrieved in getcountries
, so its call should be inside the request resolving inside getcountries
or either change getcountries
to a promise and do something like:
this.getcountries()
.then(data => {
this.getdetails();
});
you don't care when the getdetails
call ends, so it doesn't need to return a promise.
and, in the end, the render
function should look more like this:
render() {
return (
<div>
{this.state.data.map((item, key) =>
<div key={key}>{item.id} - {item.id}</div>
)}
</div>
)
}
after this it should work properly, more or less. i have to warn you, though. probably you would need to do something easier to become familiar with react's flow and how to properly work with state and js's asynchronous functions.
score:1
this is a basic example:
import react from "react";
import reactdom from "react-dom";
import "./styles.css";
function app() {
const myarray=[1,2,3,4,5]
const mytable=myarray.map((item,key)=>{return(
<table key={key}>
<tr><td>id</td><td>{item}</td></tr>
</table>)
})
return (
<div classname="app">
<h1>hello codesandbox</h1>
{mytable}
</div>
);
}
const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);
you can create a const in the render and use after in return so you can tryin your code to do something like that:
render() {
const mycomponent= this.state.data.map((item, key) => { return (
<div key={key}>
<span>{item.it}</span>
</div>
) });
return (
{mycomponent}
)
}
i used and is just for example you can use what structor you want as in the first example i used table...
score:2
i think this is happening because you're calling this.getcountries()
in the render
function. so the function is called in every render, that causes a new request that sets a new state, which will trigger a new render an so on, creating an infinite loop. so, if you delete the function calling from the render
function it should work.
Source: stackoverflow.com
Related Query
- Setting state in getDetails() occurs infinite loop
- Infinite loop in useEffect when setting state
- Infinite loop when setting and using state in a `useCallback` that is being called from a `useEffect`
- Reactjs child component goes into infinite loop on setting state array provided by parent in props
- React: setting a state Hook causes error - Too many re-renders. React limits the number of renders to prevent an infinite loop
- How to stop infinite loop when setting initial state from API with useReducer (React Hooks)
- React TypeScript: Setting State in 2 instances of the same element causes an infinite loop
- useEffect - Prevent infinite loop when updating state
- Setting state along with AsyncStorage in useEffect hook causes infinite loop?
- React hooks, set return value of a function to state causes infinite loop
- Prevent infinite loop when updating state via React useEffect Hook
- Why is Setting state with data in a fetch using context API caught in an infinite fetch loop?
- Setting context from child causes infinite call loop
- React function Component state - Too many re-renders. React limits the number of renders to prevent an infinite loop
- React Context API state update leads to infinite loop
- ..Use state error: Too many re-renders React limits the number of renders to prevent an infinite loop
- Filtering react component state causes infinite render loop
- React Redux state array variable pass as prop to child component, either infinite loop or empty array
- Why does setting state in child component onclick cause recursive loop even when button not clicked?
- Linter or User error: Setting state from useEffect causing loop
- Loading state in react: Too many re-renders. React limits the number of renders to prevent an infinite loop
- React - Infinite loop when changing state from onChange
- setState within componentDidUpdate comparing prev with current state not working to re-render page with new data, also getting infinite loop
- useCallback with state dependency causes infinite loop
- React State Infinite Loop with LocalStorage and DB
- Adding set state change causes infinite loop in React
- How to avoid infinite loop in when call a function to change state in useEffect?
- How do I avoid infinite loop when using Redux state in useEffect dependency array?
- useEffect infinite loop occurs only while testing, not otherwise - despite using useReducer
- Setting Axios Response as State. Error: Too many re-renders. React limits the number of renders to prevent an infinite loop
More Query from same tag
- How can I set redux state in a function (not component)
- Where to put ReactDOM.render in React
- Programmatically change height/width of items in react-grid-layout
- React Material Table rowData is undefined
- How to add units of measurement inside input field in reactjs
- Gatsby graphql query for GatsbyImage to use a local image from project
- Is there a way to render dynamic component inside the string text
- Redirecting From Middleware In Laravel Is Not Working As Expected
- Combining multiple React States into one variable
- Why is BrowserRouter both a Router and a Route
- React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS
- How to change placement of element for mobile version of React App?
- I am trying to access element inside modal(mui modal) using ref in react but reference to element is null
- React filter() method not working with if/else
- clear all form input box after submit form using reactjs
- semantic ui react __webpack_require__.i(...) is not a function
- unable to render my components when using with ROUTE in REACTJS
- How to use LazyList component in react-onsenui to display dynamic data?
- Unit test renderTags prop of Autocomplete
- How to hover each cell for each day with react FullCalendar?
- How to import file from public folder in react application?
- Inserting html inside string variable used in React component
- Struggling with conditional rendering in React JS
- Hiding any element in the sidebar
- How to clear input after submit with react
- Getting value out of array of object parameter and storing into an empty state in react
- How to Solve Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
- Does the use of es6 named imports reduce the bundle size when using webpack
- What does `[]` mean in `setState`?
- React, onClick only works after second click, Axios, Async/Await