I am trying to create a component that executes straight when DOM is loaded, onInit();
This function posts a token to an endpoint, then if successful, I am trying to run a function called 'valid()'
The problem I keep getting is, when I try to call the 'valid' function in response, it says cannot history of undefined.
I think I am not passing props in the right way.
Also if unsuccessful, an Error page should be returned.
Thanks for any help on this
export class LandingPage extends Component {
constructor(props) {
super(props);
this.state = {};
this.valid = this.valid.bind(this);
}
valid = () => {
auth.login(() => {
this.props.history.push("/app");
});
};
componentDidMount() {
onInit();
function onInit(props) {
const apiUrl = "www.somefakedomain.com/endpoint"
axios
.post(apiUrl, {
token: 'somevalue123'
})
.then(function(response) {
console.log(response);
//CALL VALID FUNCTION HERE
this.valid; //throws error, how to run function here
})
.catch(function(error) {
console.log(error);
//Show Error Page
});
}
}
render() {
return (
<div>
<Spinner />
</div>
);
}
}
You are not passing anything to your onInIt function.
Are you perhaps trying to do something like this? -
export class LandingPage extends Component {
constructor(props) {
super(props);
this.state = {};
this.valid = this.valid.bind(this);
}
valid = () => {
auth.login(() => {
this.props.history.push("/app");
});
};
componentDidMount() {
function onInit(props) {
const apiUrl = "www.somefakedomain.com/endpoint"
axios
.post(apiUrl, {
token: 'somevalue123'
})
.then(function(response) {
console.log(response);
//CALL VALID FUNCTION HERE
this.valid(); //need to call function not reference it//throws error, how to run function here
})
.catch(function(error) {
console.log(error);
//Show Error Page
});
}
onInIt(this.props);
}
render() {
return (
<div>
<Spinner />
</div>
);
}
}
javascript reactjs function authent
So I have 3 functions below. One containing calls to the two (getBooks), which are getting requests. I set my state (isLoading) to true before the calls and then to true after the calls. This is to also make sure that the data is properly loaded. However the state is not updating so, therefore, my data from the get request is invalid. The callbacks in my setstate work in my other components, so I am confused. Below are my 3 functions.
import React from 'react';
import ReactDOM from 'react-dom';
import SidePane from './SidePane.js';
import HomeNavBar from './HomeNavBar.js';
import axios from 'axios';
import qs from 'qs';
import Loading from './Loading.js';
class HomePage extends React.Component {
constructor(props) {
super(props);
this.state = {
bookSearch: "",
bookSearchResults: [],
bookSearchFound: false,
isLoading: false
};
this.handleSearch = this.handleSearch.bind(this);
this.alertBookName = this.alertBookName.bind(this);
this.getBooksFromIsbn = this.getBooksFromIsbn.bind(this);
this.getBooks = this.getBooks.bind(this);
axios.defaults.withCredentials = true;
}
changeBookName = (e) => {
var bookName = e.target.value;
bookName = bookName.split(' ').join('+');
this.setState({bookSearch: bookName})
}
getBooksFromIsbn(isbns){
var books = [];
axios
.get('http://localhost:9000/api/getBooksFromIsbn',
{
params: {
books: JSON.stringify(isbns)
}
})
.then(res =>
{
console.log(res.data);
books = res.data;
})
.catch(error => {
console.log(error.response);
});
}
getBooks(){
this.setState({
isLoading: true
},
function(){console.log("setState completed", this.state)}
);
var bookResults = this.handleSearch();
var books = this.getBooksFromIsbn(bookResults);
this.setState({
isLoading: false
},
function(){console.log("setState completed", this.state)}
);
this.props.setBookSearchResults(books);
}
handleSearch(){
var bookResults = [];
var url = 'http://localhost:9000/api/getOpenLibrarySearch';
axios
.get(url,
{
params: {
bookSearch: this.state.bookSearch
}
})
.then(res =>
{
//this.setState({bookSearchResults: res.data});
for(var i=0; i < res.data.docs[i].isbn.length; i++){
bookResults = bookResults.concat(res.data.docs[i].isbn);
}
console.log(bookResults);
})
.catch(error => {
console.log(error.response);
});
return bookResults;
}
render(){
if(this.state.isLoading == false){
return(
<div>
<HomeNavBar authToken = {this.props.authToken} email = {this.props.email} />
<SidePane changeBookName = {this.changeBookName} handleSearch = {this.getBooks} />
</div>
)
}
else
{
return <Loading />;
}
}
}
It looks like you need to actually return the books value from getBooksFromIsbn. Await the axios call resolution and return books.
async getBooksFromIsbn (isbns) {
const books = [];
try {
const res = await axios.get(
'http://localhost:9000/api/getBooksFromIsbn',
{
params: {
books: JSON.stringify(isbns)
}
});
books = res.data;
} catch(error) {
console.log(error.response);
}
return books;
}
Same for handleSearch, the code needs to wait and return the resolution of the GET request.
I have a AddContactForm form that allows the user to add contacts.
When the user fills in the conactNumber- onBlur it checks if this conactNumber already exists.
How can I make The CheckIfContactExists function returns either true or false instead of the promise object?
Please note that I can't change the returned value from the api, it only return a contact object.
export default class AddContactForm extends Component {
state = {
...
};
checkContact = () => {
const { contactNumber } = this.state.newContactInfo;
CheckIfContactExists(contactNumber); //return promise
};
render() {
...
return (
...
);
}
}
const CheckIfContactExists = async searchString => {
const { data: contactsInfo } = await axios.get(`api/Contacts/SearchContact?contactNum=${searchString}`);
};
You can't make it return just a boolean since it's an asynchronous operation. You could make the checkContact function async as well and await it.
Example
export default class AddContactForm extends Component {
state = {
// ...
};
checkContact = async () => {
const { contactNumber } = this.state.newContactInfo;
const contactInfo = await CheckIfContactExists(contactNumber);
this.setState({
contactNumberTaken: Object.keys(contactInfo).length !== 0
});
};
render() {
// ...
}
}
Make use of async await in checkContact just like you did for CheckIfContactExists. Also return the boolean result from CheckIfContactExits method
export default class AddContactForm extends Component {
state = {
...
};
checkContact = async () => {
const { contactNumber } = this.state.newContactInfo;
try {
const res = await CheckIfContactExists(contactNumber);
return res;
} catch (e) {
console.log('Error', error);
}
};
render() {
...
return (
...
);
}
}
const CheckIfContactExists = async searchString => {
const { data: contactsInfo } = await axios.get(`api/Contacts/SearchContact?contactNum=${searchString}`);
if (Object.keys(contactsInfo).length > 0) {
return true;
} else {
return false;
}
};
I've made a dashboard in React. It has no active updating, no buttons, fields or drop-downs. It will be deployed on a wall TV for viewing. All panels (9 total) are updated through the API call. The initial call (seen below) works, and all JSON data is fetched and the dashboard is initially updated.
BOTTOM LINE PROBLEM: I need to call the API every 30 sec to 1 minute after the initial call to check for updates.
I have attempted "setInterval" inside the componentDidMount() as suggested by people on here answering others' questions and I get an error "await is a reserved word". I've read about forceUpdate() which seems logical for my use case given what the facebook/react page says about it. But, I've read on here as well to stay away from that...
The code below is a light version of the code I'm using. I've removed many of the components and imports for brevity's sake. Any help would be greatly appreciated.
import React, { Component } from 'react';
import Panelone from './Components/Panelone';
import Paneltwo from './Components/Paneltwo';
class App extends Component {
state = {
panelone: [],
paneltwo: []
}
async componentDidMount() {
try {
const res = await fetch('https://api.apijson.com/...');
const blocks = await res.json();
const dataPanelone = blocks.panelone;
const dataPaneltwo = blocks.paneltwo;
this.setState({
panelone: dataPanelone,
paneltwo: dataPaneltwo,
})
} catch(e) {
console.log(e);
}
render () {
return (
<div className="App">
<div className="wrapper">
<Panelone panelone={this.state} />
<Paneltwo paneltwo={this.state} />
</div>
</div>
);
}
}
export default App;
Move the data fetch logic into a seperate function and invoke that function using setInterval in componentDidMount method as shown below.
componentDidMount() {
this.loadData()
setInterval(this.loadData, 30000);
}
async loadData() {
try {
const res = await fetch('https://api.apijson.com/...');
const blocks = await res.json();
const dataPanelone = blocks.panelone;
const dataPaneltwo = blocks.paneltwo;
this.setState({
panelone: dataPanelone,
paneltwo: dataPaneltwo,
})
} catch (e) {
console.log(e);
}
}
Below is a working example
https://codesandbox.io/s/qvzj6005w
In order to use await, the function directly enclosing it needs to be async. According to you if you want to use setInterval inside componentDidMount, adding async to the inner function will solve the issue. Here is the code,
async componentDidMount() {
try {
setInterval(async () => {
const res = await fetch('https://api.apijson.com/...');
const blocks = await res.json();
const dataPanelone = blocks.panelone;
const dataPaneltwo = blocks.paneltwo;
this.setState({
panelone: dataPanelone,
paneltwo: dataPaneltwo,
})
}, 30000);
} catch(e) {
console.log(e);
}
}
Also instead of using setInterval globally, you should consider using react-timer-mixin. https://facebook.github.io/react-native/docs/timers.html#timermixin
For those looking for functional components. You can update the state every n time by creating a setInterval and calling this in the useEffect hook. Finally call the clearInterval method in the clean up function
import React, { useEffect, useState } from "react";
import Panelone from "./Components/Panelone";
import Paneltwo from "./Components/Paneltwo";
function App() {
const [state, setState] = useState({
panelone: [],
paneltwo: [],
});
const getData = async () => {
try {
const res = await fetch("https://api.apijson.com/...");
const blocks = await res.json();
const dataPanelone = blocks.panelone;
const dataPaneltwo = blocks.paneltwo;
setState({
panelone: dataPanelone,
paneltwo: dataPaneltwo,
});
} catch (e) {
console.log(e);
}
};
useEffect(() => {
const intervalCall = setInterval(() => {
getData();
}, 30000);
return () => {
// clean up
clearInterval(intervalCall);
};
}, []);
return (
<div className="App">
<div className="wrapper">
<Panelone panelone={state} />
<Paneltwo paneltwo={state} />
</div>
</div>
);
}
export default App;
I figured I'd chime in with a slightly revised approach that uses recursion via a setTimeout call within the function block. Works the same...maybe slightly cleaner to have the function call itself from within, instead of doing this elsewhere in your code?
This article explains the reasoning in a bit more depth...but I've been using this approach for several dashboards at work - does the job!
Would look something like this:
class MyComponent extends React.Component
//create the instance for your interval
intervalID;
constructor(props) {
super(props);
this.state = {
data: [],
loading: false,
loadingMap: false,
//call in didMount...
componentDidMount() {
this.getTheData()
}
getTheData() {
//set a loading state - good practice so you add a loading spinner or something
this.setState({loading: true}), () => {
//call an anonymous function and do your data fetching, then your setState for the data, and set loading back to false
this.setState({
data: fetchedData,
loading: false
)} }
//Then call the function again with setTimeout, it will keep running at the specified //interval...5 minutes in this case
this.intervalID = setTimeout(
this.getTheData.bind(this),
300000
);
}
}
//Important! Be sure to clear the interval when the component unmounts! Your app might crash without this, or create memory leaks!
componentWillUnmount() {
clearTimeout(this.intervalID);
}
Sorry if the formatting got a little off. Haven't tried this with Hooks yet but I think you'd have a similar implementation in a useEffect call? Has anyone done that yet?
I have seen around a lot of complications about this. No need to have it in the lifecycles or in state or promisses.
In here, the service api is just a simple axios api call
This is my full implementation as I use it with context api(omitting some private code).
In my case I just care about the status response in the api since I know what I need to change. But the api can be really anything you need for/from data-wise.'
export class MyContextApiComponent ..... {
private timeout: ReturnType<typeof setInterval> | undefined
...
...
...
public statsPolling = (S_UUID: string) => {
if (!this.timeout) {
this.timeout = setInterval( () => {
this.statsPolling(S_UUID)
}, 3000)
}
this.state.api.StatisticsService.statsPolling(S_UUID)
.then(res => {
if (res.hasDescStats) {
clearInterval(this.timeout)
this.setState(prevState => ({
...prevState,
...
...
}))
}
})
.catch(e => console.warn('', e))
}
...
...
}
/// in another file in service is the api call itself with axios just checking on the server reply status
export class Statistics implements IStatistics {
public statsPolling: StatsPolling = async S_UUID => {
return axios
.get<{ hasDescStats: boolean }>(`/v2/api/polling?query=${S_UUID}`)
.then(res => {
if (res.status === 200) {
return { hasDescStats: true }
} else {
return { hasDescStats: false }
}
})
}
}
Answer
You can create a function for the componentDidMount code.
import React, { Component } from 'react';
import Panelone from './Components/Panelone';
import Paneltwo from './Components/Paneltwo';
class App extends Component {
state = {
panelone: [],
paneltwo: []
}
code = async () => {
try {
const res = await fetch('https://api.apijson.com/...');
const blocks = await res.json();
const dataPanelone = blocks.panelone;
const dataPaneltwo = blocks.paneltwo;
this.setState({
panelone: dataPanelone,
paneltwo: dataPaneltwo,
})
} catch(e) {
console.log(e);
}
}
componentDidMount() {
}
render () {
return (
<div className="App">
<div className="wrapper">
<Panelone panelone={this.state} />
<Paneltwo paneltwo={this.state} />
</div>
</div>
);
}
}
export default App;
then make a componentDidUpdate
import React, { Component } from 'react';
import Panelone from './Components/Panelone';
import Paneltwo from './Components/Paneltwo';
class App extends Component {
state = {
panelone: [],
paneltwo: []
}
code = async () => {
try {
const res = await fetch('https://api.apijson.com/...');
const blocks = await res.json();
const dataPanelone = blocks.panelone;
const dataPaneltwo = blocks.paneltwo;
this.setState({
panelone: dataPanelone,
paneltwo: dataPaneltwo,
})
} catch(e) {
console.log(e);
}
}
componentDidMount() {
this.code()
}
componentDidUpdate(){
this.code()
}
render () {
return (
<div className="App">
<div className="wrapper">
<Panelone panelone={this.state} />
<Paneltwo paneltwo={this.state} />
</div>
</div>
);
}
}
export default App;
I have a simple React button component that when clicked should retrieve and download data on the client browser. The problem I am experiencing is that the download is triggered and the csv file downloaded before the data is passed into the href.
Here is my component:
import { Component } from 'react';
import { connect } from 'react-redux';
import { PropTypes } from 'prop-types';
import { ManageUsersSelectors } from 'selectors/Users';
import { BatchRoleActions } from 'actions/Users';
class UsersExportButton extends Component {
constructor() {
super();
this.state = {
users: ''
};
}
getUsers(){
const { userIds } = this.props;
BatchRoleActions.getAllRoleUsers(userIds)
.then((users) => {
this.setState({ users: users});
return this.state.users;
});
}
render() {
return (
<div className="roles-export-button">
<a className="button button-default" href={this.state.users} download={'roles.csv'} onClick={() => this.getUsers()} return true>Export Csv</a>
</div>
);
}
}
function mapStateToProps(state) {
const userIds = ManageUsersSelectors.batchUserIdsSelector(state);
return {
userIds: userIds
};
}
UsersExportButton.propTypes = {
text: PropTypes.string.isRequired,
data: PropTypes.array
};
export default connect(mapStateToProps)(UsersExportButton);
How can I get the getUsers()/onClick function to complete the data retrieval step before downloading?
When i debug my code I can see that the getUsers function returns data - however after the download is triggered
Make sure to bind this to your functions. In your constructor you can do:
constructor() {
super();
this.state = {
users: ''
};
this.getUsers = this.getUsers.bind(this);
}
or you can use the bind this function:
getUsers = () => {
const { userIds } = this.props;
BatchRoleActions.getAllRoleUsers(userIds)
.then((users) => {
this.setState({ users: users});
return this.state.users; // This should be removed, you can use this.state.users throughout this component.
});
}
Why not get the user data in the componentDidMount lifecycle method? It doesn't look like it needs to be called onClick.
{
// ...
componentDidMount() {
this.getUsers();
}
// ...
render() {
return (
<div className="roles-export-button">
<a className="button button-default" href={this.state.users} download={'roles.csv'}>Export Csv</a>
</div>
)
}
}
How about handling the default "link" behaviour manually to get more control? Also you should probably try to access state after setState has been executed via its callback.
e.g.
getUsers(cb){
const { userIds } = this.props;
BatchRoleActions.getAllRoleUsers(userIds)
.then((users) => {
// note the callback of setState which is invoked
// when this.state has been set
this.setState({ users: users }, cb);
});
}
const handleClick = () => {
this.getUsers(() => {
window.open(this.state.whatever)
})
}
<span onClick={handleClick}>Export Csv</span>