score:2
Accepted answer
when meteor.loginwithpassword
changes your logginin
value to true, your <public />
component unmounts your wrapped <loginform />
const public = ({ loggingin, authenticated, component, ...rest }) => (
<route
{...rest}
render={(props) => {
if (loggingin) return <div />; // <--- this right here
return !authenticated ?
(react.createelement(component, { ...props, loggingin, authenticated })) :
(<redirect to="/" />);
}}
/>
);
so loggingin
values changes causing <public />
to re-render. now that loggingin
is true, you render a div instead of the component that was, unmounting it and making setstate
unavailable when the errors callback tries to invoke it.
edit: in response to your comment...
to prevent this you can handle the error display inside the <loginform />
- remove
if (loggingin) return <div />;
from your<route />
in your<public />
component. - inside your
<loginform />
you can handle the error condition. do this by making a component that displays your errors and include it in your<loginform />
component where you want it displayed. make the<errordisplay />
component return nothing if there are no errors.
example <errordisplay />
component
const errordisplay = ({ errors }) => {
errors && <div classname="error-container">{ errors }</div>
};
that is obviously barebones, but i hope it helps you understand!
Source: stackoverflow.com
Related Query
- SetState error when user login returns errors
- React+Laravel 5.8.33 +Axios: errors when registering user with an axios.post request; clarififying the code problem
- No current User AWS Amplify Authentication Error - need access without login
- How redirect to login page when got 401 error from ajax call in React-Router?
- How to show Error or Validation messages only after form is submitted and not when user is typing in antd?
- Error when trying to use function that returns a function that returns a HOC (a la Redux Connect)
- 'Unauthorized' error when using AWS amplify with grahql to create a new user
- Why does React throw an error when setState method used in a class constructor?
- Next Auth "Credentials" redirection when throwing error on custom login page
- Network error when authenticating user with AWS Cognito
- Login working in localhost but error "secret option required for sessions" when deployed in Heroku
- Typescript returns error when a function type is FunctionalComponent, but not for arrow function
- React: How to display error on incorrect user login
- React-admin: Having an error when using the custom login page shown in the docs
- Cannot read user info - Adal error cannot login
- Error "Maximum update depth exceeded. This can happen when a component calls setState inside useEffect"
- How to prevent user multiple click submit button error for a login form in react?
- catch block doesn't get fired when API returns any error
- ReactJS - setState error when unMounting and Mounting
- How can I redirect a user to login when a certain link is clicked using JWT
- MERN: Sendgrid returns unathorized when try registering a user
- React Authentication - network error when verifying if user is logged in, via token in local storage
- I tried to set my state, but it returns "Can't call setState on a component that is not yet mounted." error
- Prevent user from go back to the login page when user logged in React js
- The Spotify Web API returns null items for user playlist even when the user has got some playlists
- React: addEventListener() returns error when called inside of useEffect hook
- I am not able to add user input to state properly, getting map not a function error when it is
- How to fix "TypeError: Object(...) is not a function" when using a wrap function on React Component to authenticate user login with Browser Router
- setState error on unmounted component when with data from Firebase
- Errors when running app on server port 5000, Uncaught SyntaxError: Unexpected token '<' and Manifest: Line: 1, column: 1, Syntax error
More Query from same tag
- React does not re-render when updating state of Array of Objects
- Reactjs share link to state controlled page
- for of loop unable to loop through values of an object which has been treated as an array in reactjs
- How can I bold text within an object array items string?
- React + Redux: Uncaught Error: Expected the reducer to be a function
- Set color on button click, like select unselect color change
- onClick Link Outside of Map Using Mapped Values in JavaScript/React
- React - set controlled input value from the Redux Store
- Slash issues in sites which use React router
- How to use onload in react?
- Touchable presses not firing in absolute positioned container with zIndex (for a dropdown)
- Run a simple function on radio button select or deselect
- Simple conditional in react hook return
- how to properly make div tab in javascript to work with reactjs
- Indexing into Typescript Record with opaque type
- Jest shows console.warn for Accessing PropTypes and createClass
- How to manage state with checkboxes in React?
- How to create documents if they don't exist based on a timsteamp in firestore?
- Dynamically loaded chart data not showing Chartjs React
- Search form render
- How do I open my React web application without using the Console?
- React : How can I open a particular edit/delete window of a card?
- React Router change the link but can't changed the body
- useState keeps getting cleared while handling promises
- React axios form
- Export variable from componentDidMount
- using js operator ... to pass data into redux reducer
- GraphQL filtering by data
- Filtering Mapped React Table Data with JSON Data
- Webpack with html-webpack-plugin, error when installed globally