I have a simple component that loads in the data from a job as follows
export class ViewJob extends Component {
constructor() {
super();
this.state = {
currentJob: {},
checkedCompleted: false,
};
}
componentDidMount() {
loadJobFromId(this.props.id)
.then(job => this.setState({currentJob: job}))
}
In my render when I try to access a nested property:
this.state.currentJob.selectedCompany
I get an error:
Cannot read property 'root' of undefined
This seems to be because the state of selectedCompany is first undefined and then when the promises resolves it is set.
What is the best practice for handling this in React?
You should render the part that's using this.state.currentJob.selectedCompany only once the promise is resolved. So you can try something like this:
export class ViewJob extends Component {
constructor() {
super();
this.state = {
currentJob: {},
checkedCompleted: false,
jobsFetched: false
};
}
componentDidMount() {
loadJobFromId(this.props.id)
.then(job => this.setState({currentJob: job, jobsFecthed: ture}))
}
render(){
{ this.state.jobsFetched ? **[RENDER_WHAT_YOU_ARE_RENDERING_NOW]** : <Text>Loading...</Text> }
This way the component will be rendered only when the jobs are fetched/ promise resolved.
Related
I have a child object (element of list) which is rendered inside(?) the parent one. The component has the following properties (from JSON):
contract
{
id,
name,
}
But I need to add another one additional property which is filled in after an HTTP request with an external function to the API (for example, uuid) using one of the existing properties of an object.
My current React code looks the following way (only child component is provided):
class Contract extends Component {
constructor(props){
super(props);
this.state = {data: this.props.contract};
getUuidByName(this.state.data.name).then(val => {
this.state.data.uuid = val;
});
}
componentDidUpdate(){ }
render() {
return <tr>
<td>{this.state.data.id}</td>
<td>{this.state.data.name}</td>
<td>{this.state.data.uuid}</td>
</tr>
}
}
Everything rendered good except an additional property: uuid. Of course I do something wrong or don't do some important thing, but I have no idea what to do.
You are mutating state in the constructor. Never mutate state directly. If you are needing to set/initialize some state after it's been constructed, or mounted, then you should use the componentDidMount lifecycle method. Ensure you enqueue the state update via the this.setState method.
class Contract extends Component {
constructor(props){
super(props);
this.state = {
data: props.contract,
};
}
componentDidMount() {
getUuidByName(this.state.data.name).then(val => {
this.setState(prevState => ({
data: {
...prevState.data,
uuid: val,
},
}));
});
}
componentDidUpdate(){ }
render() {
return (
<tr>
<td>{this.state.data.id}</td>
<td>{this.state.data.name}</td>
<td>{this.state.data.uuid}</td>
</tr>
);
}
}
Do not modify state directly.
Because you're directly modifying the state, React isn't triggering a re-render.
Try the following in your constructor instead:
constructor(props){
super(props);
this.state = {data: this.props.contract};
getUuidByName(this.state.data.name).then(val => {
this.setState({
data: {
...this.state.data,
uuid: val
}
});
});
}
I am using axios for a React project, and I was wondering if the usage of then promise is correct in this case.
Basically, I use axios to fetch data from the database when the component renders.
class Participants extends React.Component{
constructor(props){
super(props);
this.state = {
databaseUsers: [],
}
this.getUsers = this.getUsers.bind(this);
}
getUsers(){
var users = axios.get('/users/get-users').then((response) => {
this.setState({databaseUsers: response.data});
});
}
componentWillMount(){
this.getUsers();
}
render(){
console.log(this.state.databaseUsers);
return(** html tree **);
}
}
What I observe is that the state of the component is set twice, once when the rendering occurs, and the then promise fires, and a second time when the promise is done fetching the data from the database and sets the state.
How do I get more control over this? Like actually wait for the data on the database, and then render?
Any tips are welcome.
There are other ways to implement what you did with several components.
But let's stick to this example.
There is nothing wrong to rendering twice, as you don't want to wait for the response and then display output.
You can have a loading flag so you could show a "loading" code and when loaded show the output.
Or you can have 1 parent component that manages the work:
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
loading: true,
data: []
}
}
componentDidMount() {
this.setState({loading: true})
axios.get('/users/get-users').then((response) => {
this.setState({
loading: false,
data: response.data
})
});
}
render() {
if (this.state.loading) {
return <LoadingComponent />;
}
return <DataComponent data={this.state.data} />
}
}
My parent component is like this:
export default class MobileCompo extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null,
datasets: {}
};
this.get_data = this.get_data.bind(this);
}
componentWillMount() {
this.get_data();
}
async get_data() {
const ret = post_api_and_return_data();
const content={};
ret.result.gsm.forEach((val, index) => {
content[val.city].push()
});
this.setState({data: ret.result.gsm, datasets: content});
}
render() {
console.log(this.state)
// I can see the value of `datasets` object
return (
<div>
<TableElement dict={d} content={this.state.data} />
<BubbleGraph maindata={this.state.datasets} labels="something"/>
</div>
)
}
}
child component:
export default class BubbleGraph extends React.Component {
constructor(props) {
super(props);
this.state = {
finalData: {datasets: []}
};
console.log(this.props);
// here I can't get this.props.maindata,it's always null,but I can get labels.It's confusing me!
}
componentWillMount() {
sortDict(this.props.maindata).forEach((val, index) => {
let tmpModel = {
label: '',
data: null
};
this.state.finalData.datasets.push(tmpModel)
});
}
render() {
return (
<div>
<h2>{this.props.labels}</h2>
<Bubble data={this.state.finalData}/>
</div>
);
}
}
I tried many times,but still don't work,I thought the reason is about await/async,but TableElement works well,also BubbleGraph can get labels.
I also tried to give a constant to datasets but the child component still can't get it.And I used this:
this.setState({ datasets: a});
BubbleGraph works.So I can't set two states at async method?
It is weird,am I missing something?
Any help would be great appreciate!
Add componentWillReceiveProps inside child componenet, and check do you get data.
componentWillReceiveProps(newProps)
{
console.log(newProps.maindata)
}
If yes, the reason is constructor methos is called only one time. On next setState on parent component,componentWillReceiveProps () method of child component receives new props. This method is not called on initial render.
Few Changes in Child component:
*As per DOC, Never mutate state variable directly by this.state.a='' or this.state.a.push(), always use setState to update the state values.
*use componentwillrecieveprops it will get called on whenever any change happen to props values, so you can avoid the asyn also, whenever you do the changes in state of parent component all the child component will get the updates values.
Use this child component:
export default class BubbleGraph extends React.Component {
constructor(props) {
super(props);
this.state = {
finalData: {datasets: []}
};
}
componentWillReceiveProps(newData) {
let data = sortDict(newData.maindata).map((val, index) => {
return {
label: '',
data: null
};
});
let finalData = JSON.parse(JSON.stringify(this.state.finalData));
finalData.datasets = finalData.datasets.concat(data);
this.setState({finalData});
}
render() {
return (
<div>
<h2>{this.props.labels}</h2>
<Bubble data={this.state.finalData}/>
</div>
);
}
}
I have a search page with three components. The browse topics component lists the topics to choose from. The browse articles component lists all the articles based on the topic ID and loads all articles if there is no topic id. The home component holds the browsetopics and browsearticles component, and changes its state according to the topic which is clicked.
class BrowseTopics extends React.Component {
constructor(props) {
super(props);
this.topicSelect = this.topicSelect.bind(this);
this.state = {error: "", topics: []};
}
componentDidMount(){
// API call which updates state topics with the list of topics
}
topicSelect(id,e) {
e.preventDefault();
this.props.topicChange(id);
}
render () {
// Rendering list of topics from API and nothing if request has not been sent
}
}
class BrowseArticles extends React.Component {
constructor(props) {
super(props);
this.state = {error: "", articles: [], url: "/api/articles"};
}
componentDidMount() {
if(this.props.topicId){
var url = '/api/topic/'+this.props.topicId+'/articles';
this.setState({url: url});
}
// Make a request to url and get articles
}
render () {
// Renders the list of articles
}
}
class Home extends React.Component {
constructor(props) {
super(props);
this.handleUpdate = this.handleUpdate.bind(this);
this.state = {topicId: ""};
}
handleUpdate(topicId) {
this.setState({topicId: topicId});
}
render () {
return(
<div>
<BrowseTopics user={this.props.user} topicChange={this.handleUpdate}/>
<BrowseArticles user={this.props.user} topicId={this.state.topicId}/>
</div>
);
}
}
What I need is, I want the browseTopics component to stop re-rendering on parent state change.
I tried using shouldComponentUpdate() (which returns false) but that even stops the componentDidMount() part and the list isn't populated.
Once the request to API is made and component is rendered, I want all further re-rendering of browseTopics to stop for the sorting to function properly.
From docs:
if shouldComponentUpdate() returns false, then componentWillUpdate(), render(), and componentDidUpdate() will not be invoked
I'd probably want to set some sort of flag telling my BrowseTopics component that the API request has been made and I no longer need/want the component to update:
class BrowseTopics extends React.Component {
constructor(props) {
super(props);
this.topicSelect = this.topicSelect.bind(this);
this.state = {
error: "",
topics: [],
hasFetched: false // flag for API
};
}
componentDidMount(){
// API call which updates state topics with the list of topics
fetch( 'myapi.json' )
.then( res => {
// set flag denoting API results have been fetcehd
this.setState({
hasFetched: true,
topics: <your topics>
});
})
}
shouldComponentUpdate(nextProps, nextState) {
if ( this.state.hasFetched ) {
return false;
}
return true;
}
...
I am using react native and I got the issue while running my application the code is as follows:
var container;
function onPress(){
container.setstate({
info:"bye"
})
}
class Demo extends Component{
constructor(props){
super(props);
this.state={
info:"hI"
}
}
componentDidMount(){
container=this;
}
}
I want to set the state of a variable outside of my class but I am getting the error.
This is the way I solved it:
Outside React.createClass.
socket.on('connect', function(data) {
console.log('connect');
});
function initStream() {
getLocalStream(true, function(stream) {
localStream = stream;
container.setState({ selfViewSrc: stream.toURL() });
container.setState({ status: 'ready', info: 'Please enter or create room ID' });
});
}
Inside React.createClass.
componentDidMount: function() {
container = this;
initStream();
},
You are not passing "counter" as param to "componentDidMount", that is causing an error. Any way you should use callbacks from some component to setState in it.
To set the state from a parent component in react you can do this:
class Demo extends Component{
someOtherFunction = () => {
this.props.updateMyState({info: bye});
}
}
class Container extends Component{
updateMyState = (newState) => {
this.setState({myStateHere: newState});
}
render() {
<Demo updateMyState={this.updateMyState}/>
}
}