I'm getting some errors in my VueJS application. IMG - http://prntscr.com/exh499
I understand that error exist because country property doesn't exist before I load data from weather JSON, but what is the way to remove this error. Also above [Vue warn]:
This is the GitHub repo, there is a bit more code so I'm not sure if you can read it here.
https://github.com/DenisLapi/weather-app
Also how to look for changes of some property in Component 2 if I edit that property in Component 1 (I'm usign $emit) but when I define property value in Component 2 and then edit that property in Component 1, usign $emit and props[] seems like value is not updated in Component 2
[Vue warn]: Error in render function : (found in <SearchResult> at C:\Users\denis\Desktop\weatherapp\src\components\Result.vue)
TypeError: Cannot read property 'country' of undefined
citydata.foo is undefined, which is fine, but citydata.foo.bar is an error since you're trying to get bar off undefined.
You should wrap everything using citydata with a v-if since it's async.
<div v-if="citydata">
<!-- Now you can use `citydata` safely. -->
</div>
Edited: fiddle with a working example https://jsfiddle.net/wostex/63t082p2/24/
BTW, there is no 'country' property in JSON output: example
You can
set default values for your props: https://v2.vuejs.org/v2/guide/components.html#Prop-Validation
check properties presence before using them in templates (v-if on content blocks)
About reaction on props change: use computed property which depends on prop value, or even watch prop changes: https://v2.vuejs.org/v2/guide/computed.html#Watchers (it depends on your needs)
Related
<div style={{ width: `${stat.base_stat}px` }} />
Can't get this to work, I ve made sure the property is not undefined but when I try to run thee app i get Cannot read property of null, Occured while linting, any ideas?
You may need to show how the stat variable is being initialized. Consider that for the very first render.
Maybe you are setting the value of stat after the first render.
Review the React Hooks flow (https://github.com/donavon/hook-flow) if you need.
My html code===>
<email-consent inline-template
:submit-queue="saveForLaterMethods">
</email-consent>
I want to pass saveForLaterMethods if it is defined.
I also try with this code
saveForLaterMethods? saveForLaterMethods : undefined
But every time I get this console log error.
Property or method "saveForLaterMethods" is not defined on the
instance but referenced during render. Make sure that this property is
reactive
Is there any way to check undefined in html?
Check if it is defined:
:submit-queue="typeof saveForLaterMethods != 'undefined' ? saveForLaterMethods : undefined"
I am having a problem rendering the props value in react.
I have added data fetched from an API to a redux store, and then mapped the state to my App component. The data shows up in my props when I view the component using react dev tools, and I can access the value of the API prop through the console by typing:
$r.props.products.items[0].title
Here's an image of Chrome dev tools illustrating ability to access props from App component for reference:
But when I try to render the props in the App component using
{this.props.products.items[0].title}
The component breaks and I receive an error in the console
saying:
Uncaught TypeError: Cannot read property 'title' of undefined
If it helps, I've created a gist here showing my App.js component where the state is mapped to the props, the actions and reducers for the redux store.
If anyone can help me that would be great. I've been pulling my hair out over it all day.
Reason is, you are fetching the data from api, until you didn't get the response {this.props.products.item} will be undefined, because render will get executed before you get the response. So either you need to hold the rendering by using some bool until you didn't get the response or put the check, like this:
{this.props.products.items && this.props.products.items[0].title}
If the previous answer is not working, the only thing I can think of is that items may exist as an empty array, in the form of this.props.products.items = []
Try:
{
this.props.products.items &&
this.props.products.items.length > 0 &&
this.props.products.items[0].title
}
Cannot assign to read only property 'props' of #
I checked #1654 with no success. Please have a look at the issue in more detail here-
Basically what I am doing is using a Navigator to move from index page to ApplistGridView page.
I see the navigation is successful(from logs) but, even before I see the screen I face this issue.
And chrome debug messages-
Code is posted at Github
Haven't found a solution.
What am I doing wrong?
You cannot push to props this.props.nav.push({id: 'Applist', index: 2}); since component properties are read-only, as the error states. Props can only be derived from a parent component, but cannot be modified.
EDIT: This article is a great starting point for people confused in this matter as I was a while ago:)
https://reactjs.org/docs/thinking-in-react.html
If this is happening to you not because of props but because of state, you may be trying to do an assignment like this:
this.state.nav = 'whatever';
Remember that assignments to state in React should be like:
this.setState({
nav: 'whatever'
});
You write this.props.nav.push({id: 'Applist', index: 2});
But this.props is read-only; you cannot modify it.
If you want to pass some value to the parent react component, then you can use this.prop.onSomeEvent(value) in a child component. Then handle the push process in the parent component.
In file node_modules\react-scripts\scripts\utils\verifyTypeScriptSetup.js
change
ts.JsxEmit.ReactJsx
to
ts.JsxEmit.ReactJSX
Just One thing:
npm install typescript#4.0.5
Restart the server
Using Angular, React and ReactNG, I get this error:
Error: undefined is not an object (evaluating 'this.props.menuOptions.map')
Here is the code:
http://jsbin.com/xuranipuza/1/edit?html,js,output
It seems like you are missing providing the attributes in your react directive element with respect to the propTypes that you are passing in. Because it then places a watch on these attribute values (reflecting the scope property name) and populate the props accordingly.
So:
<sidebar-button menu-options="menuOptions" button-image="buttonImage"
button-image-mini="buttonImageMini" menu-option-bottom="menuOptionBottom">
</sidebar-button>
Bin
Doc Says:
The reactDirective service will read the React component propTypes and watch attributes with these names. If your react component doesn't have propTypes defined you can pass in an array of attribute names to watch. By default, attributes will be watched by value however you can also choose to watch by reference or collection by supplying the watch-depth attribute. Possible values are reference, collection and value (default).
Disclaimer: I have not used ng-react before.