Passing a property aquired asynchronously - javascript

I have this code:
export default class FinancesPage extends React.Component {
constructor(props) {
super(props);
this.state = {users: []};
}
componentWillMount() {
firebase.database().ref('Users').orderByChild('transactions').startAt(1).on('value', snap => {
const users = arrayFromObject(snap.val());
this.setState({users: users});
});
}
render() {
return (
<div>
<NumberOfPurchasesComponent users={this.state.users}/>
</div>
)
}
}
And this code:
export default class NumberOfPurchasesComponent extends React.Component {
constructor(props) {
super(props);
this.state = {users: this.props.users};
}
componentWillMount() {
const users = this.state.users;
// Do stuff here
}
render() {
return (
{/*And render stuff here*/}
);
}
}
What's happening right now: The parent element FinancesPage passes an empty array of users to the child NumberOfPurchasesComponent. I need it to pass a new value of the array every time there is an update.
And i want to pass the users from FinancesPage to NumberOfPurchasesComponent, but users data is obtained async. How can I make the NumberOfPurchasesComponent refresh when the variable value is obtained?

Have you tried to use componentWillReceiveProps? I mean something like:
export default class NumberOfPurchasesComponent extends React.Component {
constructor(props) {
super(props);
this.state={users: []}
}
componentWillReceiveProps(nextProps) {
if(nextProps.users && nextProps.users!==this.state.users){
this.setState({
users: nextProps.users
})
}
}
render() {
return (
{/*And render stuff here*/}
);
}
}
This way the component knows when it has to re-render.

The FinancesPage implementation looks good. The problem lies in NumberOfPurchasesComponent in this particular piece of code :
constructor(props) {
super(props);
this.state = {users: this.props.users};
}
Am assuming in the render method of NumberOfPurchasesComponent you are using this.state.users instead of this.props.users.
constructor runs only once. Now as you mentioned data is fetched async, which means NumberOfPurchasesComponent is initially rendered even before the the response is obtained. Hence its constructor method which runs only once sets the users state to []. Even if the props gets updated from FinancesPage, as the render in NumberOfPurchasesComponent uses state, no re-render happens.
Try using this.props.users directly in NumberOfPurchasesComponent render and see if it works.

As per FinancesPage page it is well and good with codebase, but problem is why you are making setstate if there is no any manipulation of user's data as you got from API call.
So without making setState just pass it as direct
render() {
return (
<div>
<NumberOfPurchasesComponent users={this.props.users}/>
</div>
)
}
so whenever the API calls to fetch the response, here update value get in passed to NumberOfPurchasesComponent class.

Related

ReactJS/JavaScript: Access query results

After I execute a query in the console I can see: {data:{action: [...]}. How can I assign that data to a variable in a React component?
Trying this but it is not working:
class MyGraph extends React.Component {
constructor(props) {
super(props);
this.state = {
nodes: this.data
Have some falsy or empty initial value for state.node. Then fetch the data in componentDidMount - on success, update state.node with your actual data. That data can also be passed down to child components. Example:
class MyGraph extends React.Component {
constructor(props) {
super(props);
this.state = {
nodes: null,
}
}
componentDidMount() {
// w/e your fetch function is. I'm assuming your method uses promises.
fetchDataSomehow().then((response) => {
this.setState({nodes: response.data}) // or whatever property has the nodes
})
}
render() {
const nodes = this.state.nodes;
return (
<LoadingIcon isVisible={!nodes}>
{(nodes || []).map((node) => (
<MyCircle key={node.someUniqueId} node={node} /> // access `node` inside the `<MyCircle />` component using `this.props.node`
))}
</LoadingIcon>
)
}
}
You'll need to handle what happens/renders while the data is still loading (e.g the made-up <LoadingIcon /> component).

How to avoid the setState() / render() endless loop when passing data from child to parent?

I am trying to save child-data in the state of the parent, but end up with the endless loop because setState() calls render().
Error message: Maximum update depth exceeded.This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Relatively new to React, so I can't seem to word the question when googling solutions. I know why the error is occurring, I just don't know how to get around the issue. Is there a specific method I can use that prevents re-rendering?
Here is the parent:
export class ToDoList extends React.Component {
constructor(props){
super(props);
this.state = {
data: null
}
}
myCallback = (dataFromChild) => {
this.setState({data: dataFromChild.toUpperCase()})
}
render() {
return (
<div>
<ToDoItem callbackFromParent={this.myCallback}/>
</div>
);
}
}
The child:
class ToDoItem extends React.Component {
constructor(props){
super(props);
this.state = {
listInfo: 'Doggos'
}
}
render(){
return(
<h1>{this.props.callbackFromParent(this.state.listInfo)}</h1>
);
}
}
Your code is doing exactly that, an endless loop. When your ToDoItem component renders, it calls callbackFromParent which updates the state of ToDoList, causing ToDoList to re-render, subsequently re-rendering the ToDoItem. Since ToDoItem re-renders, it calls callbackFromParent again and so on...
I'd like to ask why you are trying to render the non-value-returning function of callbackFromParent. It doesn't return anything, so it doesn't make sense why you'd want to render it inside of your <h1> tags.
There is a small problem with the code you shared, that you are calling a function from the render() rather than binding it to some event which is making it go into infinite loop...
Is this what you are trying to achieve?
class ToDoList extends React.Component {
toUpper = (dataFromChild) => {
return dataFromChild.toUpperCase();
}
render() {
return (
<div>
<ToDoItem toUpper={this.toUpper}/>
</div>
);
}
}
class ToDoItem extends React.Component {
constructor(props){
super(props);
this.state = {
listInfo: 'Doggos'
}
}
render(){
return(
<h1>{this.props.toUpper(this.state.listInfo)}</h1>
);
}
}
ReactDOM.render(<ToDoList />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
You are getting an endless loop because of the following reasons:
1) You are calling the parent callback on each render.
2) You are saving the uppercased value in the parent state.
When the parent state gets updated, the child gets re-rendered, meaning that it will call the callback again, which will cause to re-render, which calls the callback again etc...
An alternative solution would be to pass the util function down to the child which can then call it once when it re-renders. Since no state in the parent is being updated, the child will not be re-rendered.
If you're trying to save data on parent but want to display it in child, try this:
Here is the parent:
export class ToDoList extends React.Component {
constructor(props){
super(props);
this.state = {
data: null
}
}
myCallback = (dataFromChild) => {
this.setState({data: dataFromChild})
}
render() {
return (
<div>
<ToDoItem callbackFromParent={this.myCallback} data={this.state.data}/>
</div>
);
}
}
The child:
class ToDoItem extends React.Component {
constructor(props){
super(props);
this.state = {
times: 0
}
// Bind Explained below
this.iBeClicked = this.iBeClicked.bind(this);
}
iBeClicked(){
this.setState({times: ++this.props.data});
this.props.callbackFromParent(this.props.data++);
}
render(){
return(
<div className="wrap">
<h1 onClick="iBeClicked">{this.props.data !== null ? this.props.data: 'Nothing' }</h1>
</div>
);
}
}
You use this.method.bind(this) in order to bind Component's this to React callback's execution inside render.

Transferring State Between Components - React

If I have a state in the App class, and I want to transfer those values into SecondApp, how do you go about that? I've tried using props but when I console log it, I get undefined.
Excuse the nooby question, I'm fairly new and trying to get my hands dirty, haha.
class App extends Component {
constructor(props) {
super(props)
this.state = {
todo: ['hello', 'hey']
}
}
}
class SecondApp extends Component {
render() {
return (
<p>?</p>
)
}
}
If you are passing the props correctly, they shouldn't turn up undefined. Props would be the correct way to go about this though!
class App extends Component {
constructor(props) {
super(props)
this.state = {
todo: ['hello', 'hey']
}
}
render() {
return <SecondApp testProp={this.state.todo}/>;
}
}
class SecondApp extends Component {
render() {
return <div>this is the prop: {this.props.testProp}</div>;
}
}
If you pass it through like that, you'll see the prop show up as "hellohey", check out the JSFiddle. Next off you'll likely want to render these items in a list, and will need to handle that accordingly. This article will point you in the right direction!
First you need to call SecondApp in App and then pass props.
class SecondApp extends React.Component {
render() {
return ( <
p > {this.props.todo} < /p>
)
}
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
todo: ['hello', 'hey']
}
}
render() {
return ( <
SecondApp todo = {
this.state.todo
} />
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
If you mean to pass data from one app to another (that means, you render an app on an id and another app on another id) you can use events.
Whenever the state of the first app updates, you can dispatch an event and put an event listener on the other app, that updates it's state.
This is a common way to share data between independent modules/apps.
You can read more about this when you google "observer subscriber pattern".
Otherwise, if you mean to pass data to a child component, you really should read the react documentation.

Component doesnt update view properly

Render does indeed get called and even though the debugger shows that temp is populated properly, the change doesnt seem to take place (the json string doesnt make it to the dom). I am probably missing something obvious.
class ProfileComponent extends Component {
constructor(props){
this.props = props;
}
componentDidMount(){
window.mainStore.subscribe(this.render.bind(this))
}
render() {
var temp = JSON.stringify(window.mainStore.getState().profile);
return (
<div>
{temp}
</div>
);
}
}
Debugging looks like :
It seems that the first time 'ProfileComponent' rendered we don't have the subscribe method, after the componentDidMount we see the correct result , lets try to add a state which blocks the first render to return invalid {temp}:
class ProfileComponent extends Component {
constructor(props){
super(props);
this.state = { loading: true, temp:''};
}
componentDidMount() {
window.mainStore.subscribe(); // I don't see all your code but i think here we don't need to bind the render because the component will render after again after changing the state (you can try it both)
const temp = JSON.stringify(window.mainStore.getState().profile); // better keeping 'window' logic here (especially if our app is SSR)
this.setState({loading: false,temp});
}
render() {
const {loading, temp} = this.state;
if(loading) {return (<div>Loading...</div>)}
return (
<div>
{temp}
</div>
);
}
};

Data Doesn't Update From API in React/Flux App

I'm using React + Flux on the frontend for a project and I need to get the username to display it on the sidebar.
The problem: I call the action in the constructor of the es6 class which fetches the data needed from the API, and I can see it being logged to the console from the onUserStateChanged method, but it doesn't get updated in the state within the render method. I don't understand how I can get the state change reflected in the component.
export default class extends React.Component {
constructor() {
super();
UserActions.getCurrentUser();
this.state = {
user: {}
};
}
componentDidMount() {
UserStore.addChangeListener(this.onUserStateChange);
}
componentWillUnmount() {
UserStore.removeChangeListener(this.onUserStateChange);
}
onUserStateChange() {
console.log('called');
this.state = {
user: UserStore.getCurrentUser()
};
console.log(this.state);
}
render(){
var _this = this;
return (
console.log(this.state);
<div>{_this.state.user.username}</div>
);
}
}
The call to console.log from onUserStateChange() contains the correct state back from the API whereas the console.log in render just shows a blank JS object
You probably want to use setState
As documentation says:
NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.
Also your constructor seems strange, do you really intend to not use the result of UserActions.getCurrentUser(); in
UserActions.getCurrentUser();
this.state = {
user: {}
};

Categories