Question 208697 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to restore data after refreshing component

Currently I’m writing an application in which there is a table and a detail page accessed by route element. I do use the params element to select required detail, the page displays without the problem and the data of selected element is presented. My problem is that after reload the store state isn’t loaded as fast as component is and the mapping of the page is gone. What should I do to persist the state of my user details component after reloading the page. I would like not to use the localstorage neither another library.

<Route path="/table/:userId" element={<Details />} />

<td>
                                    <button>
                                        <Link to={`/table/${user.id}`}>
                                            Details
                                        </Link>
                                    </button>
                                </td>

const Details = (props) => {
    const {userId} = useParams()

    console.log(props)
     console.log(userId)

   const user = useSelector((state) => state.users.data.find((u) => u.id === Number(userId)))
   
    return (
        <>
            <div className="css">
                <div className="css">
                    <h2>Some details</h2>
                    <p>Name: {detail.name}</p>
                    <p>Email: {detail.email}</p>
                    <p>City: {detail.city}</p>
                    <p>Country: {detail.country}</p>
                </div>
            </div>
        </>
    )
}

function mapStateToProps (state) {
    return {
        data: state.users.data,
        error: state.users.error
    }}

export default connect(mapStateToProps)(Details)

export const fetchUsers = createAsyncThunk('table/fetchUsers', async () => {
    const data = await fetcher('http://localhost:3001/users/')
    return data
})

I’ m trying to fetch the data once more in useEffect element but there is still error that Cannot read properties of undefined (reading 'name'). It’s my first try, the other was to try mapDispatch ToProps method but it still failed.

Tags:

2

Answers


  1. 0

    you can pass data using ‘query’ parameter

    https://nextjs.org/docs/pages/api-reference/components/link

    enter image description here

    Login or Signup to reply.
  2. 0

    first of all "detail" doesn’t seem to defined, do you mean "user"?

    second : your data is fetched asynchronously, so your component would be renderend before the data is fetchd, i.e "detail" is undefined when the component is rendered, thus the error "Cannot read properties of undefined (reading ‘name’)".

    either render your component conditionnaly something like:

    if(!user) return;
return(
<>
        <div className="css">
            <div className="css">
                <h2>Some details</h2>
                <p>Name: {user.name}</p>
                <p>Email: {user.email}</p>
                <p>City: {user.city}</p>
                <p>Country: {user.country}</p>
            </div>
        </div>
    </>)

    or use optional chaining (?.) :

    <div className="css">
            <div className="css">
                <h2>Some details</h2>
                <p>Name: {user?.name}</p>
                <p>Email: {user?.email}</p>
                <p>City: {user?.city}</p>
                <p>Country: {user?.country}</p>
            </div>
        </div>

    this way if user is undefined its properties won’t accessed, and no error will be raised

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search