I'm pretty new to javascript and react, and I'm trying to create a page to return orders for an e-commerce website that I'm creating. I am trying to create this page in a similar way to which the orders are created. Also, I am trying to be able to create a return by pressing a make return button on a customers order history page. My issue is that the order returns are not being created, and currently, in my console in my order history page I'm getting a Uncaught TypeError: Cannot read properties of undefined (reading 'orderItems') error within the const placeDevolucionHandler = () => {dispatch(createDevolucion({ ...order, devolucionItems: order.orderItems })); }; line of my code. I'm unsure why I am having this problem as I followed all the steps that I had done when creating my orders from my cart. I would really appreciate any help or guidance on how to fix this issue.
Thank you!
Note: devolucion is the name that I used in place of return.
OrderHistoryScreen.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { listOrderMine, detailsOrder } from '../actions/orderActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import {createDevolucion } from '../actions/devolucionActions';
import { DEVOLUCION_CREATE_RESET } from '../constants/devolucionConstants';
export default function OrderHistoryScreen(props) {
const orderId = props.match.params.id;
const order = useSelector((state) => state.order);
const devolucionCreate = useSelector((state) => state.devolucionCreate);
const {success, devolucion } = devolucionCreate;
const orderMineList = useSelector((state) => state.orderMineList);
const { loading, error, orders } = orderMineList;
const dispatch = useDispatch();
useEffect(() => {
dispatch(listOrderMine());
dispatch(detailsOrder(orderId));
}, [dispatch, orderId]);
const placeDevolucionHandler = () => {
dispatch(createDevolucion({ ...order, devolucionItems: order.orderItems }));
};
useEffect(() => {
if (success) {
props.history.push(`/devolucion/${devolucion._id}`);
dispatch({ type: DEVOLUCION_CREATE_RESET });
}
}, [dispatch, devolucion, props.history, success]);
return (
<div>
<h1>Order History</h1>
{loading ? (
<LoadingBox></LoadingBox>
) : error ? (
<MessageBox variant="danger">{error}</MessageBox>
) : (
<table className="table">
<thead>
<tr>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
{orders.map((order) => (
<tr key={order._id}>
<td>
<button
type="button"
onClick={placeDevolucionHandler}
className="small"
>
Make a Return
</button>
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
);
}
PlaceOrderScreen.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import {createOrder, } from '../actions/orderActions';
import CheckoutSteps from '../components/CheckoutSteps';
import { ORDER_CREATE_RESET } from '../constants/orderConstants';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
export default function PlaceOrderScreen(props) {
const cart = useSelector((state) => state.cart);
if (!cart.paymentMethod) {
props.history.push('/payment');
}
const orderCreate = useSelector((state) => state.orderCreate);
const { loading, success, error, order } = orderCreate;
const dispatch = useDispatch();
const placeOrderHandler = () => {
dispatch(createOrder({ ...cart, orderItems: cart.cartItems }));
};
useEffect(() => {
if (success) {
props.history.push(`/order/${order._id}`);
dispatch({ type: ORDER_CREATE_RESET });
}
}, [dispatch, order, props.history, success]);
return (
<div>
<div className="row top">
<div className="col-2">
<div className="card card-body">
<ul>
<li>
<h2>Order Summary</h2>
</li>
<li>
<button
type="button"
onClick={placeOrderHandler}
className="primary block"
disabled={cart.cartItems.length === 0}
>
Place Order
</button>
</li>
{loading && <LoadingBox></LoadingBox>}
{error && <MessageBox variant="danger">{error}</MessageBox>}
</ul>
</div>
</div>
</div>
</div>
);
}
devolucionActions.js
import Axios from 'axios';
import {
DEVOLUCION_CREATE_FAIL,
DEVOLUCION_CREATE_REQUEST,
DEVOLUCION_CREATE_SUCCESS,
DEVOLUCION_DETAILS_FAIL,
DEVOLUCION_DETAILS_REQUEST,
DEVOLUCION_DETAILS_SUCCESS,
DEVOLUCION_PAY_REQUEST,
DEVOLUCION_PAY_FAIL,
DEVOLUCION_PAY_SUCCESS,
DEVOLUCION_MINE_LIST_REQUEST,
DEVOLUCION_MINE_LIST_FAIL,
DEVOLUCION_MINE_LIST_SUCCESS,
DEVOLUCION_LIST_REQUEST,
DEVOLUCION_LIST_SUCCESS,
DEVOLUCION_LIST_FAIL,
DEVOLUCION_DELETE_REQUEST,
DEVOLUCION_DELETE_SUCCESS,
DEVOLUCION_DELETE_FAIL,
DEVOLUCION_SHIPPED_REQUEST,
DEVOLUCION_SHIPPED_SUCCESS,
DEVOLUCION_SHIPPED_FAIL,
DEVOLUCION_DELIVER_REQUEST,
DEVOLUCION_DELIVER_SUCCESS,
DEVOLUCION_DELIVER_FAIL,
DEVOLUCION_SUMMARY_REQUEST,
DEVOLUCION_SUMMARY_SUCCESS,
} from '../constants/devolucionConstants';
export const createDevolucion = (devolucion) => async (dispatch, getState) => {
dispatch({ type: DEVOLUCION_CREATE_REQUEST, payload: devolucion });
try {
const {
userSignin: { userInfo },
} = getState();
const { data } = await Axios.post('/api/devolucions', devolucion, {
headers: {
Authorization: `Bearer ${userInfo.token}`,
},
});
dispatch({ type: DEVOLUCION_CREATE_SUCCESS, payload: data.devolucion });
} catch (error) {
dispatch({
type: DEVOLUCION_CREATE_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
export const detailsDevolucion = (devolucionId) => async (dispatch, getState) => {
dispatch({ type: DEVOLUCION_DETAILS_REQUEST, payload: devolucionId });
const {
userSignin: { userInfo },
} = getState();
try {
const { data } = await Axios.get(`/api/devolucions/${devolucionId}`, {
headers: { Authorization: `Bearer ${userInfo.token}` },
});
dispatch({ type: DEVOLUCION_DETAILS_SUCCESS, payload: data });
} catch (error) {
const message =
error.response && error.response.data.message
? error.response.data.message
: error.message;
dispatch({ type: DEVOLUCION_DETAILS_FAIL, payload: message });
}
};
export const listDevolucion = ({ seller = '' }) => async (dispatch, getState) => {
dispatch({ type: DEVOLUCION_LIST_REQUEST });
const {
userSignin: { userInfo },
} = getState();
try {
const { data } = await Axios.get(`/api/devolucions?seller=${seller}`, {
headers: { Authorization: `Bearer ${userInfo.token}` },
});
console.log(data);
dispatch({ type: DEVOLUCION_LIST_SUCCESS, payload: data });
} catch (error) {
const message =
error.response && error.response.data.message
? error.response.data.message
: error.message;
dispatch({ type: DEVOLUCION_LIST_FAIL, payload: message });
}
};
export const summaryDevolucion = () => async (dispatch, getState) => {
dispatch({ type: DEVOLUCION_SUMMARY_REQUEST });
const {
userSignin: { userInfo },
} = getState();
try {
const { data } = await Axios.get('/api/devolucions/summary', {
headers: { Authorization: `Bearer ${userInfo.token}` },
});
dispatch({ type: DEVOLUCION_SUMMARY_SUCCESS, payload: data });
} catch (error) {
dispatch({
type: DEVOLUCION_CREATE_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
store.js
import { createStore, compose, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';
import { cartReducer } from './reducers/cartReducers';
import {
devolucionCreateReducer,
devolucionDeleteReducer,
devolucionShipReducer,
devolucionDeliverReducer,
devolucionDetailsReducer,
devolucionListReducer,
devolucionMineListReducer,
devolucionPayReducer,
devolucionSummaryReducer,
} from './reducers/devolucionReducers';
import {
orderCreateReducer,
orderDeleteReducer,
orderShipReducer,
orderDeliverReducer,
orderDetailsReducer,
orderListReducer,
orderMineListReducer,
orderPayReducer,
orderSummaryReducer,
} from './reducers/orderReducers';
import {
productCategoryListReducer,
productCreateReducer,
productDeleteReducer,
productDetailsReducer,
productListReducer,
productReviewCreateReducer,
productUpdateReducer,
} from './reducers/productReducers';
import {
userDeleteReducer,
userDetailsReducer,
userListReducer,
userRegisterReducer,
userSigninReducer,
userUpdateProfileReducer,
userUpdateReducer,
} from './reducers/userReducers';
const initialState = {
userSignin: {
userInfo: localStorage.getItem('userInfo')
? JSON.parse(localStorage.getItem('userInfo'))
: null,
},
cart: {
cartItems: localStorage.getItem('cartItems')
? JSON.parse(localStorage.getItem('cartItems'))
: [],
shippingAddress: localStorage.getItem('shippingAddress')
? JSON.parse(localStorage.getItem('shippingAddress'))
: {},
paymentMethod: 'PayPal',
},
};
const reducer = combineReducers({
productList: productListReducer,
productDetails: productDetailsReducer,
productCreate: productCreateReducer,
productUpdate: productUpdateReducer,
productDelete: productDeleteReducer,
productReviewCreate: productReviewCreateReducer,
productCategoryList: productCategoryListReducer,
cart: cartReducer,
userSignin: userSigninReducer,
userRegister: userRegisterReducer,
userList: userListReducer,
userDelete: userDeleteReducer,
userDetails: userDetailsReducer,
userUpdateProfile: userUpdateProfileReducer,
userUpdate: userUpdateReducer,
orderCreate: orderCreateReducer,
orderDetails: orderDetailsReducer,
orderPay: orderPayReducer,
orderMineList: orderMineListReducer,
orderList: orderListReducer,
orderDelete: orderDeleteReducer,
orderShip: orderShipReducer,
orderDeliver: orderDeliverReducer,
devolucionCreate: devolucionCreateReducer,
devolucionDetails: devolucionDetailsReducer,
devolucionPay: devolucionPayReducer,
devolucionMineList: orderMineListReducer,
devolucionSummary: devolucionSummaryReducer,
devolucionList: devolucionListReducer,
devolucionDelete: devolucionDeleteReducer,
devolucionShip: devolucionShipReducer,
devolucionDeliver: devolucionDeliverReducer,
devolucionSummary: devolucionSummaryReducer,
});
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancer(applyMiddleware(thunk))
);
export default store;
I'm trying to get data when template render after authentication, but requisition returns 401 (Unauthorized)... when I refresh the page, the data is loaded...
When logged in:
GET http://localhost:0666/core/user/ 401 (Unauthorized)
When refresh page:
Login.vue
There's a form to submit user and password...
<script>
import { mapActions } from 'vuex'
export default {
data: () => ({
form: {
username: '',
password: ''
}
}),
components: {},
methods: {
...mapActions('auth', ['ActionDoLogin']),
async submit () {
try {
await this.ActionDoLogin(this.form)
this.$router.push({ name: 'Dashboard' })
} catch (err) {
alert(err.data ? err.data.message : 'Não foi possivel fazer login')
}
}
}
}
</script>
Dashboard.vue:
<template>
<div class="dashboard">
<a class="nav-link" style="color: #6cbde1;">Hello {{user.first_name}}, your account will expire
in 0 days</a>
</div>
</template>
<script>
import LoadSession from '../../services/loadSession'
export default {
name: 'Dashboard',
components: {},
mounted () {
LoadSession.get().then(resp => {
this.user = resp.data
})
},
data () {
return {
user: { first_name: '' }
}
},
methods: {}
}
</script>
actions.js
import services from '#/http'
import * as storage from '../storage'
import * as types from './mutation-types'
export const ActionDoLogin = async ({ dispatch }, payload) => {
await services.auth.login(payload).then(res => {
dispatch('ActionSetToken', res.data.token)
})
return await services.auth.loadSession().then(res => {
dispatch('ActionSetUser', res.data.body)
})
}
export const ActionCheckToken = ({ dispatch, state }) => {
if (state.token) {
return Promise.resolve(state.token)
}
const token = storage.getLocalToken()
if (!token) {
return Promise.reject(new Error('token Inválido'))
}
dispatch('ActionSetToken', token)
return dispatch('ActionLoadSession')
}
export const ActionLoadSession = async ({ dispatch }) => {
try {
const user = await services.auth.loadSession()
dispatch('ActionSetUser', user)
} catch (err) {
dispatch('ActionSignOut')
}
}
export const ActionSetUser = ({ commit }, payload) => {
commit(types.SET_USER, payload)
}
export const ActionSetToken = ({ commit }, payload) => {
storage.setLocalToken(payload)
storage.setHeaderToken(payload)
commit(types.SET_TOKEN, payload)
}
export const ActionSignOut = ({ dispatch }) => {
storage.setHeaderToken('')
storage.deleteLocalToken()
dispatch('ActionSetUser', {})
dispatch('ActionSetToken', '')
}
services.js
export default {
login: { method: 'post', url: 'api-token-auth/' },
loadSession: { method: 'get', url: 'core/user/' }
}
What could be causing this? Help me...
This is not the solution, but "solved" my issue.
In Login.vue I send a param p: true
<script>
import { mapActions } from 'vuex'
export default {
data: () => ({
form: {
username: '',
password: ''
}
}),
components: {},
methods: {
...mapActions('auth', ['ActionDoLogin']),
async submit () {
try {
await this.ActionDoLogin(this.form)
this.$router.push({ name: 'Dashboard', params: { p: true } })
} catch (err) {
alert(err.data ? err.data.message : 'Não foi possivel fazer login')
}
}
}
}
</script>
When the page renders, a reload is done to update the page.
Using a if condition to set p to false and reload once.
mounted () {
LoadSession.get().then(resp => {
this.user = resp.data
})
if (this.$route.params.p) {
this.$route.params.p = false
location.reload()
}
}
I'm still looking for the best solution, but for a while this is enough...
sorry i'm new to React. I'm trying to make a basic social network to learn react.
Context:
When i click on the "like" button, the setState should call the function to update the state of my component, but it is updated only when i refresh the page. I think the ComponentDidUpdate function isn't called like it should. What did i do wrong? Thanks for your help!
Here are the parts of the code :
Like button component:
class Like_Button extends React.Component {
constructor(props) {
super(props);
this.state = {liked : "Like"};
}
isliked(){
fetch("likes_of_user/")
.then(res => res.json())
.then((result) => {
result.map(x => {if(this.props.pk == x.liked_post){this.setState({liked: "Unlike"});}});
})
}
componentDidMount() {
this.isliked();
}
componentDidUpdate(prevProps, prevState) {
if (prevState.liked !== this.state.liked) {
this.isliked();
}
}
render() {
return (
<button className = "buttons" onClick={() => {
var csrftoken = getCookie('csrftoken');
fetch(`like_post/${this.props.pk}`, {method: "POST", headers: {'Accept': 'application/json', 'Content-Type': 'application/json','X-CSRFToken': csrftoken}})
}}>{this.state.liked}</button>
)
}
}
Newsfeed component:
class Newsfeed_comp extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
items: []
};
}
componentDidMount() {
fetch("get_newsfeed/")
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
items: result
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { error, isLoaded, items } = this.state;
if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ul>
{items.map((item ,index) => (
<li className="postbox" key={`${item}${index}`}>
{item.author}
{item.date}
{item.content}
<Like_Button pk={item.id} />
</li>
))}
</ul>
);
}
}
}
ReactDom render:
ReactDOM.render(<Newsfeed_comp />, document.getElementById("newsfeed_view"))
Try something like this:
LikeButton.js
import React, { useEffect, useState } from 'react';
export default function LikeButton({ pk }) {
const [like, setLike] = useState(false);
useEffect(() => {
const fetchLike = async () => {
const res = await fetch("likes_of_user/");
const result = await res.json();
if (result.length > 0) {
setLike(result.find(item => item.liked_post === pk));
}
};
try {
fetchLike();
} catch (error) {
// handle error
}
});
const handleClick = async () => {
const csrftoken = getCookie('csrftoken');
return fetch(`like_post/${pk}`, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRFToken': csrftoken
},
method: 'POST',
});
};
return (
<button className='buttons' onClick={handleClick}>
{like}
</button>
);
};
NewsFeed.js
import React, { useEffect, useState } from 'react';
export function NewsFeed() {
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [items, setItems] = useState([]);
useEffect(() => {
const getNewsFeed = async () => {
const res = await fetch('get_newsfeed/');
const result = await res.json();
setIsLoaded(true);
setItems(result);
};
try {
getNewsFeed();
} catch (error) {
setIsLoaded(true);
setError(error);
}
});
if (error) return <div>Error: {error.message}</div>;
if (isLoaded) return <div>Loading...</div>;
const list = items.map((item) => (
<li className='postbox' key={item.content}>
{item.author}
{item.date}
{item.content}
<LikeButton pk={item.id} />
</li>
));
return <ul>{list}</ul>;
};
App.js
ReactDOM.render(<NewsFeed />, document.getElementById('newsfeed_view'));
Looks like you've reversed your logic, i.e. your button directly updates the data in the backend but does nothing to update component state, so the componentDidUpdate isn't called as you've seen. The refresh is required so the component is remounted and the componentDidMount can fetch the likes data.
Try instead to update local state first, then use componentDidUpdate to issue the side-effect of updating the backend.
constructor(props) {
super(props);
this.state = { liked: true };
}
isliked() {
fetch("likes_of_user/")
.then(res => res.json())
.then((result) => {
result.map(x => {
if (this.props.pk === x.liked_post) {
this.setState({ liked: false });
}
});
})
}
componentDidUpdate(prevProps, prevState) {
if (prevState.liked !== this.state.liked) {
const csrftoken = getCookie('csrftoken');
fetch(
`like_post/${this.props.pk}`,
{
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRFToken': csrftoken,
},
}
);
}
}
<button
className="buttons"
onClick={() => this.setState(
prevState => ({ liked: !prevState.liked })
)}
>
{this.state.liked ? "Liked" : "Unliked"}
</button>
I am working on a project and I am getting 406(not acceptable) error in the browser. I am using vuejs, vuex framework.
verify.vue code:
<template>
<div>
<usernav/>
<div class="container">
<h1 style="padding:90px;"> Enter OTP</h1>
<div>
<mdb-input label="OTP" v-model="value" />
<br />
<mdb-btn color="info" #click="verify()">Verify</mdb-btn>
</div>
</div>
</div>
</template>
<script>
import { mdbInput, mdbBtn } from 'mdbvue'
import usernav from './user_nav'
export default {
name: 'otp',
components: {
mdbInput,
mdbBtn,
usernav
},
data () {
return {
value: ''
}
},
methods: {
verify () {
this.$store.dispatch('VERIFY', {
otp: this.value
}).then(success => {
console.log('success')
}).catch(error => {
console.log(error)
})
}
}
}
</script>
<style scoped>
.container {
width: 500px;
}
</style>
The verify.js code:
import { isAuthenticated } from './auth'
import axios from 'axios'
export default ({
state: {
},
mutations: {
},
actions: {
VERIFY: (payload) => {
return new Promise((resolve, reject) => {
const userId = isAuthenticated().user._id
const token = isAuthenticated().token
console.log(userId)
console.log(token)
axios
.post(`https://onu-backend.herokuapp.com/api/onu/user/${userId}/verifyEmail`, payload, {
headers: {
Authorization: 'Bearer ' + token
}
}).then(response => {
if (response.status === 200) {
console.log(response)
resolve(true)
}
}).catch(error => {
reject(error)
})
})
}
}
})
The isAuthenticated code:
export const isAuthenticated = () => {
if (localStorage.getItem('auth')) {
return JSON.parse(localStorage.getItem('auth'))
}
return false
}
Error I am getting: error image
Can anyone tell me why am I getting this error? The api used in the code is cross checked with postman and is working fine. I think there some problem with sending bearer token. Please help.
This one particular firebase function hasn't worked for me when calling it as an action. Login, edit username, register, all of those work fine... except logout.
After looking at some tutorials and Google's own documentation, I thought this function would work like all the other firebase-auth functions I've implemented.
Here's what my actions to the db look like:
/* AuthUser.js */
export const login = credentials => {
return (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase();
firebase
.auth()
.signInWithEmailAndPassword(credentials.email, credentials.password)
.then(() => {
dispatch({ type: LOGIN_SUCCESS });
dispatch(push('/home'));
})
.catch(err => {
dispatch({ type: LOGIN_FAIL, err });
});
};
};
export const logout = () => {
return (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase();
firebase
.auth()
.signOut()
.then(() => {
dispatch({ type: LOGOUT_SUCCESS });
dispatch(push('/login'));
}) /* ERROR POINTS RIGHT AT THIS LINE */
.error(err => {
dispatch({ type: LOGOUT_FAIL, err });
});
};
};
export const register = user => {
return (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase();
firebase
.auth()
.createUserWithEmailAndPassword(user.email, user.password)
.then(res => {
return res.user.updateProfile({
displayName: user.displayName,
});
})
.then(() => {
dispatch({ type: REGISTER_SUCCESS });
dispatch(push('/login'));
})
.catch(err => {
dispatch({ type: REGISTER_FAIL, err });
});
};
};
export const save = displayName => {
return (dispatch, getState, { getFirebase }) => {
const firebase = getFirebase();
const user = firebase.auth().currentUser;
if (displayName !== '') {
user
.updateProfile({
displayName,
})
.then(() => {
dispatch({ type: SETTINGS_NAME_CHANGED });
dispatch(push('/home'));
})
.catch(err => {
dispatch({ type: SETTINGS_ERROR, err });
});
} else {
dispatch({ type: SETTINGS_LEFT_ALONE });
dispatch(push('/home'));
}
};
};
Here is how I'm setting up my connects in the Component that calls some of these functions.
/* Settings.js */
import React from 'react';
import { /* Some Stuff */ } from 'reactstrap';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import 'someStyles.scss';
import { logout, save } from '../store/actions/authUser';
class Settings extends React.Component {
constructor(props) {
super(props);
this.state = {
displayName: '',
};
}
/* This doesn't! */
onLogout = event => {
event.preventDefault();
this.props.logout();
};
/* This works! */
onSubmit = event => {
event.preventDefault();
this.props.save(this.state.displayName);
};
onChange = event => {
this.setState({
[event.target.id]: event.target.value,
});
};
render() {
const { displayName } = this.state;
return (
<Container className=".settingsBody">
<nav>
<Nav>
<NavItem>
<NavLink href="https://github.com">GitHub</NavLink>
</NavItem>
<NavItem>
<NavLink>
<div onClick={this.onLogout.bind(this)}>Logout</div>
</NavLink>
</NavItem>
</Nav>
</nav>
<Form onSubmit={this.onSubmit.bind(this)}>
<FormGroup>
<Label for="displayName">Change Display Name</Label>
<Input
type="text"
name="text"
id="displayName"
placeholder={this.props.auth.displayName}
value={displayName}
onChange={this.onChange}
/>
</FormGroup>
<Button color="primary">Save Settings</Button>
</Form>
</Container>
);
}
}
Settings.propTypes = {
logout: PropTypes.func.isRequired,
save: PropTypes.func.isRequired,
authError: PropTypes.string,
auth: PropTypes.object,
};
const mapStateToProps = state => {
return {
authError: state.auth.authError,
auth: state.firebase.auth,
};
};
const mapDispatchToProps = dispatch => {
return {
logout: () => dispatch(logout()),
save: displayName => dispatch(save(displayName)),
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(Settings);
React throws this error: TypeError: firebase.auth(...).signOut(...).then(...).error is not a function Yet other functions run as expected when ran.
Is there something I'm missing? The code will attempt to navigate to the page I want but throws the error before that page properly mounts.
Promises doesn't have .error callback, it should be .catch.
Read about Using Promises