Sometimes React fails silently when running render code. It's then hard to find out where it broke.
I wonder, if I should just put all the code for render function inside try {} catch(err) {alert(err)}?
Is it a good practice or should I catch and debug errors in a different way?
One of the cases it shows no errors is when I send some props variables to a component which are actually undefined and it tries to get properties of that undefined variable, like this:
<FormField form={this.props.form} />
Then, inside FormField component render function there is this code:
var value = this.props.form[this.props.id]
Now, if form prop is undefined, the code in FormField component doesn't show any error, but when I use try/catch, it shows this:
Probably I should use try/catch to debug the errors then fix and add checks, then remove try/catch for production?
Sounds like you could benefit from prop validation. Then you can decide upon types for your props.
React.createClass({
propTypes: {
form: React.PropTypes.object,
id: React.PropTypes.string
}
// ...
})
Then if you don't supply a property of the correct type, it will log an error.
Alternatively, you could supply a default value for the property if that would be more appropriate.
React.createClass({
getDefaultProps: function() {
return {
form: defaultFormProp
};
}
});
Then if you don't supply the prop when you render the component, the default value will be used.
Related
I am new to React and trying to understand an existing project codebase that I need to work on.
In two component classes, I see they define the onError property of type PropTypes.func as below.
MyComp.jsx
MyComp.propTypes = {
//other properties
onError: PropTypes.func.isRequired,
};
This property is set at multiple places in the class in the catch block as follows.
SomerService.someFunc()
.then(() => { // some code
})
.catch((e) => onError(e));
OR
try {
//some code
} catch (e) {
onError(e);
}
Based on my little understanding, I was expecting that since the property type is PropTypes.func there should be a function named onError which basically handles the error or show an error message or something like that. But there is no such method anywhere in the code. So, what exactly does it do? And how are those exceptions/errors handled?
PropTypes are used to validate(to check the type of prop) the props passed to the component.
https://www.npmjs.com/package/prop-types
in your case, the MyComp component accepts the onError prop, whose type is .func (a function). and .isRequired means that you should send the onError prop to MyComp component whenever you use MyComp.
<MyComp onError={(e)=>{/*function to handle error*/}} />
could you please tell me how to use watch function in vue js .I tried to used but I got this error.
vue.js:485 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "m"
found in
---> <AddTodo>
<Root>
https://plnkr.co/edit/hVQKk3Wl9DF3aNx0hs88?p=preview
I created different components and watch properties in the main component
var AddTODO = Vue.extend({
template: '#add-todo',
props: ['m'],
data: function () {
return {
message: ''
}
},
methods: {
addTodo: function () {
console.log(this.message)
console.log(this.m);
this.m =this.message;
},
},
});
When I try to add item I am getting this error.
Step to reproduce this bug
Type anything on input field and click on Add button
this.m =this.message;
this line is the issue,
It's recommended that you don't modify prop directly...
instead create a data property and then modify it.
It shows warning because you're modifying the prop item, prop value will be overwritten whenever the parent component re-renders.
The component's props are automatically updated in the component as soon as you change their value outside of it.
For this reason, trying to change the value of a property from inside your component is a bad idea: you should use the props as read-only.
If you want to use a prop as the initial value of some of your component's data you can simply declare it this way:
data: function () {
return {
changeable: this.receivedProp;
}
},
That being said, if you are trying to change the value of a prop from inside a component to be able to use your reassigned prop outside of it, you are doing it the wrong way. The way you should handle this is by using Vue's custom events.
Remember, as Vue's documentation states:
In Vue, the parent-child component relationship can be summarized as props down, events up. The parent passes data down to the child via props, and the child sends messages to the parent via events.
I'm new to React. I'm not understanding a part in this code:
var HelloMessage = React.createClass({
render: function() {
return <h2>{this.props.message}</h2>;
}
});
var TextBox = React.createClass({
getInitialState: function() {
return { isEditing: false }
},
update: function() {
// Where is props.update defined? //
this.props.update(this.refs.messageTextBox.value);
this.setState(
{
isEditing: false
});
},
edit: function() {
this.setState({ isEditing: true});
},
In the code I can't find the props declaration for update. But looking through the code we should see "update" as a property of the TextBox component.
I'm not seeing an explicit declaration of this.props.update within any render method.
How/Where is props.update defined?
So inside the HelloReact component render method, a few TextBox components are returned like so:
...
<TextBox label='First Name' update={this.update.bind(null, 'firstName')}>
...
Now here what is happening is that HelloReact is passing a prop named update to this TextBox component. This means that inside the TextBox component I will be able to use this prop with this.props.update. Every prop that is passed down from the parent will populate this.props of the child. In this specific case we are passing down label and update.
Now inside the TextBox component we will be able to access these props intuitively with this.props.label and this.props.update. Inside this component it's define a private method that is called update, this is the code from the snippet you posted with better formatting:
...
update: function() {
this.props.update(this.refs.messageTextBox.value);
this.setState({ isEditing: false });
},
...
So here we are calling this.props.update which is the prop that was passed down from the parent in HelloReact. The reason we are wrapping this call in a private method is because on top of being able to call this.props.update() we also want to do something else, in this case we want to update the state of the TextBox component as well.
I hope this explanation was clear enough. I suggest reading about React from the official docs which are pretty amazing, or watch any of the many tutorials online. These are key concepts of React and you need to understand them properly in order to be able to develop in React.
For this case you might wanna read this, which comes from the offical docs and is about props.
I know if you want to alter something within a component itself you use state, and when the emit is external then u use props to receive it. But today I stumped across this example
var Label = React.createClass({
handleClick: function(){
console.log("Click");
this.props.children = "Text After Click";
this.setState({liked: false});
},
render: function () {
console.log("Render");
return (
<p ref="p" onClick={this.handleClick}>{this.props.children}</p>
);
}
});
Used props instead of state to change the text a value of a button. I'm confused now. The link to the source is here http://myshareoftech.com/2013/12/unit-testing-react-dot-js-with-jasmine-and-karma.html
I don't know about the source but when i tried above code it throws this error:
Uncaught TypeError: Cannot assign to read only property 'children' of object #<Object>.
It should not work because the basic property of the props is, as per DOC:
Props are Read-Only, Whether you declare a component as a function or a class, it must never modify its own props. All React components must act like pure functions with respect to their props.
Check the fiddle for error: https://jsfiddle.net/pjnp6yza/
Reference: https://facebook.github.io/react/docs/components-and-props.html#props-are-read-only
I have the following component in a file called DashboardPosition.js:
var DashboardPosition = React.createClass({
getInitialState: function() {
return {
items: []
};
},
render: function() {
return (
<div className="well well-sm dashboard-item">
This component has {this.state.items.length} items
</div>
);
}
});
I then render this with no problems in my page like so:
var dashboardPosition = <DashboardPosition />;
React.renderComponent(dashboardPosition, document.querySelector("#position"));
But when I try the following:
var dashboardPosition = <DashboardPosition />;
React.renderComponent(dashboardPosition, document.querySelector("#position"));
dashboardPosition.setState({
items: [{name: "AMD"}, {name: "LIQ"}, {name: "ELEC"}]
});
I get the following error:
Uncaught TypeError: undefined is not a function
dashboardPosition.setState
This seems to be only occurring in v0.11.0. I've tried it in v0.10.0 and it works fine. Possible bug or have I missed something?
This was a change that started in 0.10.0 by giving you a warning in the development build, and in 0.11.0 is now a "breaking change".
When you make an instance of a component, what's returned is a descriptor, which is just whatever react needs to render that component. Previously to 0.10.0 this happened to be the actual virtual dom nodes, which lead to a lot of antipatterns and removed potential from react being able to optimize certain things. You can no longer do anything with the returned values except:
return them from a render function
use the cloneWithProps add on to make an updated copy
If you need to setState on a DashboardPosition component, you need to do it from within DashboardPosition.
If it doesn't make sense to do from within DashboardPosition, you should be passing items as a prop, e.g. <DashboardPosition items={items} />, and using this.props.items instead of this.state.items.