score:0
data
must be an array if you want to map
on it, you can try to set directly data
with result.data.data
if it's an array, like following :
useeffect(async () => {
let result = await loadlist();
setdata(result.data.data);
}, []);
score:1
useeffect can not have an async callback you need to wrap it like this
useeffect(()=>{
const fetch = async () => {
const result = await loadlist();
setdata(result.data.data);
}
fetch();
}, []);
score:2
useeffect
does not allow the use of an async
function. instead you should just use the then
method when calling your loadlist
function and set the data in the callback.
it seems that useeffect
doesn't need a dependency as it only needs to get the data on the first render, not when data
changes. the latter would result in an infinite loop (update data
=> do something when data
updates => update data
)
in setdata
just pass the result.data.data
to update data
, not within another object. otherwise the data will not be an array, but an object.
export default function list() {
let [data, setdata] = usestate(null);
useeffect(() => {
loadlist().then((result) => {
setdata(result.data.data);
});
}, []);
return (
<div>
{data &&
data.map((item) => (
<div key={item.id}>
{item.title} author: {item.author} creact time: {item.creactetime}
</div>
))}
</div>
);
}
Source: stackoverflow.com
Related Query
- React, using useEffect to updata data, a data is a Array, but when I use map or Object.keys(data).map, both are not work. How to make it work?
- I'm trying to fatch data from array using map function in react. But id is not fetching. I use 'key' keyword, still got undefined id
- Can I use mock data and proxy api data at the same time in my react project when using node express as a proxy server?
- React component not re-rendering on URL parameter change when using useEffect hook to fetch data
- Can't concatenate json server data into array using useEffect hook in React
- React using react-hook-form - rendering output when no data is available - error map undefined
- Can't access array data from API call when using map() in React
- react when use useeffect for unmount , data not change
- How Use images from javascript array in react using filter and map function
- array object working if we hardcode data but not working when we populate data from Node js to react js
- Data from API call are stored in a Array but when i try to use that array in a function for further use it shows that array is empty . why?
- React - using Context to pass down array variable, but when there is an update, component receiving array variable not re-render
- React useEffect to fetch data not finished yet when try to sort data using React Router useSearchParams
- When using useState with an array argument, how do you use useEffect to update a button dynamically?
- React useEffect looping many times when fetching data and setState using fetch API
- how to convert an array to a array of objects with additional information in react using map when doing a POST api request
- I'm fetching a problem when I'm trying to fetch data from an API by using useEffect in react
- how to use react fetch() with useEffect hook and map the fetched data
- ReactJs page renders fine when using .map of objects but if use index of array runs on first save but crashes on reload
- Making an axios get request and using React useState but when logging the data it still shows null
- I have an array state of my react component, should I use Object.assign() when I add new item? I tried spread operator but see strange behavior
- How do I use react context API to pass data from parent component to child component when using react-router in the parent component in React.js?
- React error when trying to get data from api using useEffect hook
- I am trying to connect Lottery Contract to React Application using Metamask, But when I call manager() method on the contract I get an empty array
- i can see array of objects coming in my http get request from python django but data gets converted into undefined when it comes inside jsx react
- Data is undefined in try catch block inside useEffect using async/await, but works when switching to Promises
- How to call array data on button onclick using map method in React JS
- How to fix missing dependency warning when using useEffect React Hook
- You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
- React useEffect Hook when only one of the effect's deps changes, but not the others
More Query from same tag
- Higher Order Component (self) wrapping in React
- How do you incorporate an alert which will come out saying ADDED after clicking the save button from this form?
- React: How to hit API only once using useEffect
- Overriding react components styles with styled component
- React - Set state object using args
- How to conditionally set the width property of a Semantic UI React Grid column?
- With JavaScript + React, how to have a string evaluate inline?
- How to make multiple Axios requests using a dynamic array of links in Javascript?
- react routing two cmponents
- Can you do a set.State and add the Element to the top of the Array?
- React Native Module AppRegistry is not a registered callable module
- How to handleSubmit with a redux-form
- Material UI linked buttons with MUI's styled component api
- Is there any way to call the api and save it using useState in reactjs?
- Animating svg text using framer motion in React
- How in react app in URL always open append with "/"
- how to menu item redirect to a link using href?
- Is it okey to use side effects in the useState hook callback?
- How to use group route in vue js like laravel?
- .Net localhost servers when creating Angular/React applications
- Why should I keep the state flat
- Password and Confirm Password validation on input with Joi
- React js convert object to arrays for useState
- React reset useMemo value
- React - render class component when checkbox is selected
- when i increment the counter it increases by 2 not one. i am using react context for this
- Displaying symbol after value in TextField
- React prevent child update
- Chrome doesn't save Express cookie in React app
- Ajax call in react js