How to get request body to be populated - javascript

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 })
})
}
}

Related

FETCH PATCH request returns my data as being null

app.patch('/api/todos/:id', async (req, res) => {
try {
const data = await pool.query("UPDATE todolist SET task = $1 WHERE id = $2;", [req.body.task, req.params.id])
res.json(req.body)
} catch (error) {
console.error(error.message)
}
})
I am trying to make a fetch PATCH request, but every time I do, instead of grabbing the value from the alert window and storing its value in my database, it returns null, or an empty string. Not sure why it is doing this, because it works perfectly well on Postman. Any advice would be appreciated.
import React from "react";
class UpdateBtn extends React.Component {
render() {
const updateTodo = (e, alert) => {
fetch('api/todos/' + e, {
method: 'PATCH',
header: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ task: alert })
})
.then(res => res.json())
.catch(error => console.error(error.message))
}
const handleUpdate = (e) => {
const alert = window.prompt("Update Task:")
if (alert.length === 0) {
return undefined;
}
updateTodo(e.target.id, alert)
// window.location.reload()
}
return (
<button
className="updateBtn"
id={this.props.id}
value={this.props.value}
onClick={handleUpdate}>Update</button>
)
}
}
export default UpdateBtn;

is map function is not working or fetched data have some problem

getting error (Cannot read properties of undefined (reading 'map')) while rendering list. the code is attached below
please help.
REACT Code in which Data have been fetched and tried rendered.
import React, { Component } from 'react'
// import axios from 'axios';
export default class List extends Component {
constructor(props)
{
super(props);
this.state={apiResponse:[]};
}
callAPI()
{
fetch("http://localhost:9000/testAPI")
.then( (res) => res.json())
.then( (data) => {this.setState({apiResponse: data.task});});
}
componentWillMount()
{
this.callAPI();
}
render() {
return (
<div>
<h1>{this.state.apiResponse}</h1>
{
this.state.apiResponse.map((r)=>
<li >r.task</li>
)
}
</div>
)
}
}
NODE JS from where the data is being fetched to react
router.get("/",function(req,res)
{
MongoClient.connect(url, function(err, db) {
if (err) throw err;
var dbo = db.db("to-do");
// var query = { address: "Park Lane 38" };
dbo.collection("to-do").find({}).toArray(function(err, result) {
if (err) throw err;
console.log(result);
res.json(result)
// res.send((result))
db.close();
});
});
})
Your problem is that your json response is not including the task-property (at least not every time). By setting apiResponse to this value you are setting it to undefined and the map-function is not available anymore. A workaround could be to check if the property task is available before setting the state.
fetch("http://localhost:9000/testAPI")
.then( (res) => res.json())
.then( (data) => {
if (data.task) {
this.setState({apiResponse: data.task});
}
});

Retrieve data from Firestore, and setState

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);
}
}
}

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]

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