Retrieve data from Firestore, and setState - javascript

export class Diet extends Component {
constructor(props) {
super(props);
this.state = {
loaded: false,
Ft: 0,
};
}
async componentDidMount() {
const id = firebase.auth().currentUser.uid;
await firebase.firestore
.collection("users")
.doc(id)
.get()
.then(function (doc) {
if (doc.exists) {
this.setState({
Ft: users.Ft,
});
} else {
alert("error");
}
});
}
Hello, I am trying to retrieve the Ft from my Firestore document and store the value in this.state, so afterward I can use it in an expression later on on the page, any idea on what I'm doing wrong?
Error: [Unhandled promise rejection: TypeError: _firebase.default.firestore.collection is not a function. (In '_firebase.default.firestore.collection("users")', '_firebase.default.firestore.collection' is undefined)]


I think you're looking for
async componentDidMount() {
const id = firebase.auth().currentUser.uid;
firebase.firestore()
.collection("users")
.doc(id)
.get()
.then(function (doc) {
if (doc.exists) {
this.setState({
Ft: doc.data().Ft
});
} else {
alert("error");
}
});
}


You can try consoling your returned data to know what firestore is returning. Another mistake that you're doing is that you're using await together with then/catch and they don't work together in the same function. Run this snippet to correct the mistake and check the console for what firestore is actually returning.
export class Diet extends Component {
constructor(props) {
super(props);
this.state = {
loaded: false,
Ft: 0,
};
}
async componentDidMount() {
const id = firebase.auth().currentUser.uid;
firebase.firestore
.collection("users")
.doc(id)
.get()
.then(function (doc) {
if (doc.exists) {
console.log(doc.data());
//As you're expecting to get Ft then you can set the state like this
this.setState({
Ft: doc.data().Ft
});
} else {
alert("error");
}
});
}}
or use try/catch
export class Diet extends Component {
constructor(props) {
super(props);
this.state = {
loaded: false,
Ft: 0,
};
}
async componentDidMount() {
const id = firebase.auth().currentUser.uid;
let fetchedData = await firebase.firestore.collection("users").doc(id).get()
try {
if(fetchedData.exists){
console.log(fetchedData.data());
//As you're expecting to get Ft then you can set the state like this
this.setState({
Ft: doc.data().Ft
});
}
} catch (error) {
alert("error", error);
}
}
}

Related

Async function undefined despite binding

I'm struggling to figure out why the function storeEmailVerified() in my React Native code below returns undefined. Here is the error message:
that.storeEmailVerified is not a function. (In
'that.storeEmailVerified("true")', 'that.storeEmailVerified' is
undefined)
I have bound both of the following functions to 'this' in the constructor.
constructor(props) {
super(props);
this.storeEmailVerified = this.storeEmailVerified.bind(this);
this.checkEmailVerified = this.checkEmailVerified.bind(this);
}
checkEmailVerified = async () => {
let currentUser = firebase.auth().currentUser.uid;
firebase.database().ref().child("/users").child(currentUser).on("value", function (snapshot) {
if (snapshot.exists()) {
const emailVerified = snapshot.child("emailVerified").val();
if (emailVerified == true) {
this.setState({
emailVerified: true
})
this.storeEmailVerified("true");
// AsyncStorage.setItem("emailVerified", true)
}
else {
this.setState({
emailVerified: false
})
this.storeEmailVerified("false");
// AsyncStorage.setItem("emailVerified", false)
}
}
});
};
storeEmailVerified = async status => {
try {
await AsyncStorage.setItem("emailVerified", status)
} catch (error) {
alert(error)
return 'error'
}
}

React - Loading data before render

I'm new to react and I have a question about a best practice that sees me make a mistake .
I call an API to retrieve information and modify an array in the state once the response is returned by the API. In the "render" I have to retrieve the information from this array (when it is completed) or it sends me back an error because the array is empty when the render is initialized.
class MyClass extends React.Component {
constructor(props) {
super(props)
this.state = {
activeIndex: 0,
items: []
}
}
componentDidMount() {
axios
.get(`API_ADDRESS`, {
headers: {
Authorization: `Token XXX`,
},
})
.then(function(response) {
this.setState({
items: response.results,
})
})
.catch(error => {
notification.warning({
message: error.code,
description: error.message,
})
})
}
changeDialog = (e, index) => {
e.preventDefault()
this.setState({
activeIndex: index,
})
}
render() {
const { activeIndex, items } = this.state
const {
first_name: firstName,
last_name: lastName,
phone,
email,
address,
} = items[activeIndex]
The error indicates :
TypeError: _items$activeInde is undefined
How can I solve this error related to data loading? (trying to keep the destrying elements method)
Thanks a lot
Eliott

Because API that you fetch from server is async. The first time render of Component, data that you setState in axios still not yet updated, it just updated when Component render the second time.
So you must check state in render Component like this to make sure that if activeIndex is defined then declare variable with items[activeIndex] :
activeIndex && const {
first_name: firstName,
last_name: lastName,
phone,
email,
address,
} = items[activeIndex]

Two issues:
beware of this inside the Promise returned by axios. You use function(){} so the this inside is not the component's instance. Change it to an arrow function.
add a guard so you won't destructure undefined when activeIndex points to an item element that is not there (which happens in the initial loading before the axios fetches the data).
Fix:
// ... (code not shown remains unmodified)
componentDidMount() {
axios
.get(`API_ADDRESS`, {
headers: {
Authorization: `Token XXX`,
},
})
.then(response => { // changed this line
this.setState({
items: response.results,
})
})
// ... (code not shown remains unmodified)
render() {
const { activeIndex, items } = this.state
if (!items[activeIndex]) { // added this line
return <div>Hold tight while items are being fetched...</div>; // added this line
} // added this line
const {
first_name: firstName,
// ... (code not shown remains unmodified)

just change your component like so:
constructor(props) {
super(props)
this.state = {
activeIndex: 0,
items: [],
isFetching: false
}
}
componentDidMount() {
// staring your fetching
this.setState({isFetching: true});
axios
.get(`API_ADDRESS`, {
headers: {
Authorization: `Token XXX`,
},
})
.then(function(response) {
// finish fetching when your response is ready :)
this.setState({
items: response.results,
isFetching: false
});
})
.catch(error => {
// finish fetchnig
this.setState({isFetching: false})
notification.warning({
message: error.code,
description: error.message,
})
})
}
changeDialog = (e, index) => {
e.preventDefault()
this.setState({
activeIndex: index,
})
}
render() {
// if your component is while fetching shows a loading to the user
if(this.state.isFetching) return <div>Loading...</div>;
// if there is no results shows a msg to the user
if(this.state.items.length === 0) return <div>there is not items!!!</div>
const { activeIndex, items } = this.state
const {
first_name: firstName,
last_name: lastName,
phone,
email,
address,
} = items[activeIndex]

How to get request body to be populated

I am doing a get response and in my api/cmsview it is not getting the object that my Axios is passing.
class CmsView extends Component {
constructor(props) {
super(props)
this.state = {
cmsObj: [],
packageLid : props.location.state
}
var packageLid = this.props.location.state.packageLid
console.log(packageLid.PACKAGE_LID) //this gets populated with data
Axios.get('/api/cmsview', {packageLid})
.then((response) => {
this.setState({ cmsObj: response.data })
})
}
}
My packageLid does get populated with data, but when I do the Axios get:
in my cmsview.js
router.get('/', (req, res, next) => {
console.log(req.body.packageLid.PACKAGE_LID)
}
my req.body.packageLid does not get populated. Any idea why? It just outputs "undefined"

You need to put axios call in componentDidMount method.
componentDidMount() {
var packageLid = this.props.location.state.packageLid
console.log(packageLid.PACKAGE_LID) //this gets populated with data
Axios.get('/api/cmsview', {packageLid})
.then((response) => {
this.setState({ cmsObj: response.data })
})
}
}

Having issue with state variable in react js. Cannot update the variable's value to true

import getAuthentication from './getAuthentication';
class Home extends React. Component {
constructor() {
super();
//this.authentication = false;
this.state = {
username: '',
password: '',
check:false,
authentication:false
};
this.err = '';
}
componentDidUpdate() {
console.log (this.state.authentication);
console.log(this.state.authentication == true);
if (this.state.check)
{
const promiseAuthentication = getAuthentication(
this.state.username,
this.state.password,
);
promiseAuthentication
.then(response => {
console.log (response.data.Success);
console.log(response.data.Success == true);
this.setState({check :false, authentication:response.data.Success});
})
.catch(error => {
// console.log(error);
this.err = error;
});
}
if (this.state.authentication == true) {
event.preventDefault();
history.push('/overview');
}
}
assignUsername = event => {
this.setState({ username: event.target.value });
};
assignPassword = event => {
this.setState({ password: event.target.value });
};
handleSubmit = () => {
this.setState({ check:true });
};
==============================================================
getAuthentication.js
import axios from 'axios';
function getAuthentication(username, password) {
const authenticationConfig = {
Email: username,
Password: password,
};
return axios.post(
'http://localhost:5002/login/confirmation',
authenticationConfig,
);
}
export default getAuthentication;
In the above code my this.state.Authentication is not getting updated to true
I am trying to update its value in axios promise.
Can someone please tell me what's wrong? I mean I have tried everything but I am not able to proceed.
How do I change the state of Authentication object and switch new window?
I have a second file that is returning the axios promise where promise value is "undefined".. How do I make async call and resolve this issue ??

componentDidUpdate is wrapped in if (this.state.check). Nothing in the code you pasted sets this.state.check to true. Set this.state.check: true.

React how to render async data from api?

I am using preact(light version of react) but syntax is almost the same. I am having an issue displaying verified after setting state from promise result. This is my container component:
import { h, Component } from "preact";
import { VerifierService } from "services/verifierService";
var CONFIG = require("Config");
//import * as styles from './profile.css';
interface PassportProps { token?: string; path?: string }
interface PassportState { appId?: string; verified?: boolean }
export default class Passport extends Component<PassportProps, PassportState> {
constructor(props) {
super(props);
this.state = { appId: CONFIG.Settings.AppId };
}
async componentDidMount() {
console.log("cdm: " + this.props.token);
if (this.props.token != undefined) {
await VerifierService.post({ token: this.props.token })
.then(data => {
this.setState({ verified: data.result });
console.log(JSON.stringify(data, null, 4));
})
.catch(error => console.log(error));
}
}
render() {
return <div>Test: {this.state.verified}</div>;
}
}
I can see console.log as true inside of promise result, but i can't display it in view.

Your data in your console.log is true, so therefor data.result will give you undefined. Try to just set the data in setState.
await VerifierService.post({ token: this.props.token })
.then(data => {
this.setState({ verified: data });
console.log(JSON.stringify(data, null, 4));
})
.catch(error => console.log(error));

Categories