I have my component:
getInitialState() {
return {
items: []
};
},
componentDidMount() {
// make remote call to fetch `items`
this.setState({
items: itemsFromServer
})
},
render(){
if(!this.state.items.length){
// show empty state
}
// output items
}
Extremely contrived/sandboxed, but this is the general idea. When you first load this component, you see a flash of the "empty state" HTML, as the server hasn't yet returned any data.
Has anyone got an approach/a React Way™ of handling whether there is actually no data vs. showing a loading state?
I've just been rendering a empty span element but you could just as easily render a CSS spinner of some kind to show it's loading.
if(!this.state.items.length){
return(<div class="spinner-loader">Loading…</div>);
}
http://www.css-spinners.com/
You may also want to consider what happens if your response comes back with no results. I would use (this.state.items === null) to indicate that you are waiting for results and an empty array/collection (!this.state.items.length) to indicate that no results were returned.
Related
I'm hitting this route: http://site.dev/person/1
And my component looks something like this:
// PeopleComponent.vue
<template>
<div>
<template v-if="person == null">
<b>Error, person does not exist.</b>
</template>
<template v-else>
<pre> {{ person }} </pre>
</template>
</div>
</template>
<script>
export default {
mounted() {
this.$store.dispatch('getPeople');
}
computed: {
// represents the person whose id potentially matches the value of `/:id` in route.
person(){
let id = parseInt(this.$route.params.id)
let person = null
if(id > 0)
person = this.$store.state.people.find(p => p.id == id)
return person;
}
}
}
</script>
// [styles]
What I'm doing in this component:
I get an ID in my URL. The ID represents a specific resource being shown on this page. I have a person() computed property to retrieve the object whose ID matches the parameter in the URL from my Vuex store.
The desired outcome:
At the top of the page, I would like to display an error message if the object cannot be found (if say, for example, someone types an ID that doesn't exist in the array of objects in the store). If the item is found, a simple dump of the object is fine. This currently works, but the delay between fetching the data from the API and finding the right object in the store seems to be just long enough to briefly show the error message as if the object could not be found when the page first loads. When tested with a slower network speed, this error message is visible for several seconds. I want to eliminate it such that it does not appear at all if the object exists.
What I've tried:
v-cloak - tried applying this to every parent div, even the div#app itself, to no avail. I must be doing something wrong.
v-if - as seen above in the example
Some pointers would be appreciated, thank you!
Update 31/03/2020
As per Phil's suggestion, I tried to incorporate a flag to indicate when the page is ready. I did it in two different ways.
Method #1
Made the mounted() 'async' and added an await on the action that retrieves people from my API. Setting flag to true after it:
async mounted() {
await this.$store.dispatch('getPeople');
this.loaded = true;
}
But I still see the error message, briefly.
Method #2
Use a then callback on the action, and set the flag to true inside the callback
mounted() {
let vm = this
vm.$store.dispatch('getPeople').then(() => {
vm.loaded = true;
})
}
Both methods don't stop the message from appearing.
I suspect that this is what's happening:
Core rule
Error should ONLY show if loaded=true and person=null
Page loads, loaded is false and person is null. Error won't show.
Page does a call to get people from API. Error still isn't showing.
After the call, loaded has been set to true
[At this point, loaded is true and person hasn't been resolved by the computed property yet, THIS is where I believe I'm seeing the error.]
Computed property finds the relevant record from the store on the next tick.
Person is no longer null, so the error disappears.
Edit 01/04/2020
Answering Phil's question: What does your getPeople() action look like?
getPeople({ commit }) {
axios.get('/get/people')
.then(response => {
commit("getPeople", response.data);
})
.catch(error => {
console.log(error);
})
},
Sounds like you need one more piece of state, for example loading.
Change your getPeople action to be composable, ie return the Axios Promise so that it waits for the async task to complete...
getPeople ({ commit }) {
// make sure you return the promise
return axios.get('/get/people').then(response => {
commit("getPeople", response.data)
}).catch(error => {
console.error(error)
// also make sure you don't accidentally convert this to a successful response
return Promise.reject(error)
})
},
then try something like this
export default {
data: () => ({ loading: true }),
async created () {
// "created" fires earlier than "mounted"
await this.$store.dispatch('getPeople')
this.loading = false
},
computed: {
// etc
}
}
Now you can use loading in your template
<div v-if="loading">Loading...</div>
<div v-else>
<!-- your "person" template stuff goes here -->
</div>
Note
Although this was my initial solution - Phil's answer seems to explain the problem best, and give a more suitable solution. So I'm still using my loader, but instead of a configured timer, I'm now simply waiting for the Promise.
In the end I realised I'm asking the site to wait for an indefinite amount of time until information is retrieved. In that time, something has to happen. I had to ask myself "well, what do you want displayed there before the resource is retrieved?" as this can't happen instantaneously... so I added spinner in.
The problem is the "indefinite" part, though. I don't know how long to display the spinner for. so I configured a global timeout variable.
So
1) If timeout hasn't been reached and resource is empty, display loader
2) If resource has loaded, show resource
3) If resource is empty and timeout has been reached, display error message
I'm pleased with this as a solution.
I had the same problem I used Use Vue-progressbar here is the link
http://hilongjw.github.io/vue-progressbar/index.html
I have implemented in my project if you need help just let me know.
This question already has answers here:
How to handle calling functions on data that may be undefined?
(2 answers)
Closed 3 years ago.
render() {
return (
<p>{this.state.recipes[0].title}</p> // This is what I believe should work - Ref Pic #1
// <p>{this.state.recipes[0]}</p> // This was trying random stuff to see what happens - Ref Pic #2
// <p>{this.state.recipes.title}</p> // This was me trying crazy nonsense - Ref Pic #3
)
}
I am attempting to traverse through some JSON and am getting some very wonky responses. If anyone would like to look at the JSON themselves, it's available at this link.
When the first p tag is run, I get the following response:
This is my first question, so I can't embed images, I'm sorry.
Being unsure why it said recipes[0] was undefined, I ran it again with the second p tag soley uncommented, to which I get the following response: Still the same question, still can't embed, sorry again.
That response really caught me off guard because the keys it reference's (nid, title, etc..) are the ones I know are in the object. 'Title' is what I want.
Last, I tried just the third p tag, to which the app actually compiled with no errors, but the p tag was empty. Here's what I have in React Devtools, but I still can't embed.
Looking at < Recipes > it clearly shows that state has exactly what I want it to, and image two shows recipes[0] has the key I try to call the first time. I have searched and Googled and even treated my own loved ones as mere rubberducks, but to no avail.
What am I doing wrong?
The error in the first p tag tells you what exactly is happening. Accessing a property of an 'undefined' will break javascript/ react.
You must probably not have the expected data in the state, to verify what I am saying, simply debug by console.log(this.state) in your render:
render() {
console.log(this.state); // probably has this.state.recipes empty array at first render
...
this probably happened because your state is being populated by an async call from an api. Render will be called first before your async request from an api resolves (which means unfortunately you don't have the ..recipes[0] data yet in your state)
I am guessing you have this in your componentDidMount:
componentDidMount() {
ThirdParty.fetchRecipes().then(data => {
this.setState({ recipes: data.recipes }); // after setState react calls render again. This time your p tag should work.
})
...
If you have newer react version I would recommend to use optional chaining because the property you are interested in is deeply nested: How to handle calling functions on data that may be undefined?
<p>{this.state?.recipes?.[0]?.title}</p>
Another effective way but too wordy:
const title =
this.state &&
this.state.recipes &&
this.state.recipes.length &&
this.state.recipes[0].title
? this.state.recipes[0].title
: "";
render() {return (<p>{title}</p>)}
I believe you are fetching the JSON asynchronously. In that case you should consider boundary cases where your initial recipes state is an empty array.
When you run the first p tag, since JSON is fetched asynchronously, initially this.state.recipes is not defined, hence you get the error.
When you run the second p tag, during the first render, this.state.recipes is undefined, hence it works inside p tag, but after the JSON is fetched and state is set, render is called again and this time this.state.recipes[0] is an object, hence it can't be counted as a valid react component, thus the error shows up.
With the 3rd p tag, as you have mentioned yourself, this.state.recipes.title will compile successfully with no errors, but the value will be undefined.
You just need to check for the edge cases where initial state is empty.
constructor(props) {
super(props);
this.state = { recipes: [] }
}
render() {
return (
<p>
{this.state.recipes.length > 0 ? {this.state.recipes[0].title} : ''}
</p>
)
}
you can do something like this to handle state when there is data and when there is no data
constructor(props) {
super(props);
this.state = {
recipes: []
};
}
render() {
return (
<p>
{this.state.recipes && this.state.recipes.length ? {this.state.recipes[0].title} : {this.state.recipes}}
</p>
)
}
I have a "slow" loading issue in one of my pages.
That page contains a "root" component - let's call it Container.
My Container makes 2 fetch calls upon a value selection from a dropdown list.
The fetched data (A and B) are passed to a child component (Board).
Board is built from 2 unrelated components - Player and Item and they use A and B respectively as initial data.
It so happens that the Players render process is much more heavy than Item's.
The result is that Item is rendered on the page and after some few seconds Player is rendered also.
My wish is to see both rendering at the same time - how can I achieve that?
I guess it is something should be done by Board but how?
It is also important that this "waiting" will take place every time the value from the droplist is changed (it always there for the users to choose).
Thanks!
There are a couple of ways to do this.
1) Use graphql to orchestrate the loading of data, so that the page renders when all of the data is available
2) Set state values for playerDataReady and itemDataReady. If either of these is false, display a loading spinner. When they are both true (as a result of ajax calls being resolved), then the render will do both at the same time
In the constructor...
state = {
playerDataReady: false,
itemDataReady: false,
}
:
:
componentDidMount() {
// Request player data, using axios or fetch
axios.get(...)
.then(data) {
this.data = data
this.setState({playerDataReady:true})
}
// Do the same for your item data (and update itemDataReady)
}
In your render function:
render() {
if (!playerDataReady || !itemDataReady) {
return <Loader/>
// The data has arrived, so render it as normal...
return ....
You can fill in the details
So let's say there is acomponent which displays 2 child components: a document list and the selected document. By default the selected document component is not rendered, only when a document is selected from the list. And i also want this whole thing work when a new document is selected from the list.
There is a state which holds the document content and responsible for the selected document rendering, so i thought i'm going to set it to null in the method which handles the list item selection in order to unmount the previously created child component. Like this (excerpts from the parent class):
handleResultListItemClick(docname) {
if (this.state.sectioncontainer != null) this.setState({sectioncontainer: null},()=>{console.log("muhoo");});
var selected_doc = this.state.resultlist.filter((doc) => {
return docname === doc.properties.title;
});
this.setState({sectioncontainer: selected_doc[0].content.sections},()=>{console.log("boohoo");});
}
...
render() {
return (
...
{this.state.sectioncontainer != null && <SectionContainer listOfSections={this.state.sectioncontainer}/>}
);
}
The only problem is that state handling is not fast enough (or something) in react, because putting the state nullification and its new value setting in the same method results in no change in ReactDOM.
With the above code, the component will be created when the parent component first rendered, but after selecting a new doc in the list results in no change.
How should i implement this in way which works and also elegant?
I found this: ReactDOM.unmountComponentAtNode(container) in the official react docs. Is this the only way? If yes, how could i get this container 'name'?
Edit:
Based on the answers and thinking the problem a bit more through, i have to explain more of the context.
As kingdaro explained, i understand why there is no need to unmount a child component on a basic level, but maybe my problem is bit more sophisticated. So why did i want to unmount the child?
The documents consist of several subsections, hence the document object which is passed to the child component is an array of objects. And the document is generated dynamically based on this array the following way (excerpt from the SectionContainer class which is responsible to display the document):
buildSectionContainer() {
return this.props.listOfSections.map((section, index) =>
{
if (section.type === 'editor') return (
<QuillEditor
key={index}
id={section.id}
modules={modules}
defaultValue={section.content}
placeholder={section.placeholder}
/>
);
else if (section.type === 'text') return (
<div key={index}>{section.value}</div>
);
}
);
}
render() {
return (
<div>
{this.buildSectionContainer()}
</div>
);
}
The SectionContainer gets the array of objects and generate the document from it according to the type of these sections. The problem is that these sections are not updated when a different doc is selected in the parent component. I see change only when a bigger length array is passed to the child component. Like the firstly selected doc had an array of 2 elements, and then the newly selected doc had 3 elements array of sections and this third section is added to the previously existing 2, but the first 2 sections remained as they were.
And that’s why i though it’s better to unmount the child component and create a new one.
Surely it can happen that i miss something fundamental here again. Maybe related to how react handles lists. I just dont know what.
Edit2:
Ok, figured out that there is a problem with how i use the QuillEditor component. I just dont know what. :) The document updates, only the content of QuillEditors doesnt.
The reason your current solution doesn't actually do anything is because React's state updates are batched, such that, when setState is called a bunch of times in one go, React "combines" the result of all of them. It's not as much of a problem with being "not fast enough" as it is React performing only the work that is necessary.
// this...
this.setState({ message: 'hello', secret: 123 })
this.setState({ message: 'world' })
// ...becomes this
this.setState({ message: 'world', secret: 123 })
This behavior doesn't really have much to do with the problem at hand, though. As long as your UI is a direct translation of state -> view, the UI should simply update in accordance to the state.
class Example extends React.Component {
state = {
documentList: [], // assuming this comes from the server
document: null,
}
// consider making this function accept a document object instead,
// then you could leave out the .find(...) call
handleDocumentSelection = documentName => {
const document = this.state.documentList.find(doc => doc.name === documentName)
this.setState({ document })
}
render() {
const { document } = this.state
return (
<div>
<DocumentList
documents={this.state.documentList}
onDocumentSelection={this.handleDocumentSelection}
/>
{/*
consider having this component accept the entire document
to make it a little cleaner
*/}
{document && <DocumentViewer document={document.content.sections} />}
</div>
)
}
}
I've made an AJAX call in React with Axios, and I'm a bit confused about how the response is dealt with.
Here is my code:
componentDidMount() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then( res => {
const users = res.data
this.setState({ users });
});
}
render() {
console.log(this.state.users)
return (
<div>
{this.state.users.map( user => <p>{user.name}</p>)}
</div>
)
}
When I console.log the results, two values are returned:
[] - the empty array assigned to the initial state
The expected array from the API.
This presumably can be explained by the state value being returned once on initialisation, and then again with componentDidMount.
My problem arises in how I access the this.state.users value. Obviously any time I access this, I want the values returned from the AJAX response, but if, for example I try to render the name property from the first object in the array...
{this.state.users[0].name}
...it attempts to access [], and thus returns nothing.
However, if I try to iterate through the arrays elements...
{users.map( user => <p>user.name</p> )}
...it returns the values as expected.
I don't know why it works with the second example but not the first. Surely if the first is attempting to pull data from the initial state value (an empty array), then when mapping through this.state.users it would also be attempting to map through an empty array and return nothing, or an error.
I'm obviously not fully understanding the React rendering process here and how componentDidMount works in the component lifecycle. Am I wrong in trying to assign the response value directly to state?
Would appreciate if anyone could help to clear this up.
When you use map() on this.state.users initially, it will do so over an empty array (which won't render anything). Once the response arrives, and this.setState({ users }) is called, render() will run again. This time, the array of users is no longer empty and the map() operation will be performed on each of the users in the array.
However, when you use {this.state.users[0].name} initially on the empty array, you're trying to access the name property of an object that doesn't yet exist — which will result in an error. To prevent the error, you could do a check before accessing the properties of the object:
{this.state.users.length > 0 && this.state.users[0].name}
Now it will behave the same way as in the first example. I.e. the first render() won't actually do anything, since this.state.users.length = 0. But as soon as this.setState() is called with new users, render() will run again, and this time this.state.users[0].name is available.
There is another way with constructor. just add your state with empty array users as-
constructor(props) {
super(props);
this.state = {
users: []
};
}
With this component first rendered with empty users array. When you trigger state update, component rerender with new array.