javascript - reactJS with an error "TypeError: Cannot read property 'quantity' of undefined" -
i having problem whenever execute function calling value text field has error
my setstate props code:
selectedorder: { breakdown: [{ size: 'xs', quantity: '0' }, { size: 's', quantity: '0' }] } my function code below:
onsizechange = (propname, event, index, value) => { var newsize = this.state.selectedorder; if (_.findwhere(newsize.breakdown, {size: propname}).quantity !== event.target.value) { _.findwhere(newsize.breakdown, {size: propname}).quantity = event.target.value; this.setstate({selectedorder: newsize}) } } and code textfield
<textfield type='number' floatinglabeltext='xs' min={0} value={_.findwhere(this.state.selectedorder.breakdown, {size: 'xs'}).quantity} onchange={this.onsizechange.bind(this, 'xs')} fullwidth /> here's screenshot of error have. line 425 value line of textfield [![1]](https://i.stack.imgur.com/fbomi.png)
here's full code. error happens in function onaddorder
class orderform extends component { constructor(props) { super(props); this.state = { orders: [], selectedorder: { category: '', product: '', price: '', color: '', brand: '', breakdown: [{ size: 'xs', quantity: '0', }, { size: 's', quantity: '0', }] }, }; } onaddorder = () => { var neworders = this.state.orders; neworders.push({ breakdown: [{ size: 'xs', quantity: _.findwhere(this.state.selectedorder.breakdown, {size: 'xs'}).quantity }, { size: 's', quantity: _.findwhere(this.state.selectedorder.breakdown, {size: 's'}).quantity }, { size: 'm', quantity: this.refs.sizem.getvalue(), }, { size: 'l', quantity: this.refs.sizel.getvalue(), }, { size: 'xl', quantity: this.refs.sizexl.getvalue(), }, { size: '2xl', quantity: this.refs.size2xl.getvalue(), }, { size: '3xl', quantity: this.refs.size3xl.getvalue(), } ] }); this.setstate({ orders: neworders }); } render() { return ( <div> <row> <col xs={1}> <textfield type='number' floatinglabeltext='xs' min={0} value={_.findwhere(this.state.selectedorder.breakdown, {size: 'xs'}).quantity} onchange={this.onsizechange.bind(this, 'xs')} fullwidth /> </col> <col xs={1}> <textfield type='number' floatinglabeltext='s' min={0} value={_.findwhere(this.state.selectedorder.breakdown, {size: 's'}).quantity} onchange={this.onsizechange.bind(this, 's')} fullwidth /> </col> <col xs={1}> <textfield type='number' floatinglabeltext='m' ref='sizem' min={0} fullwidth /> </col> <col xs={1}> <textfield type='number' floatinglabeltext='l' ref='sizel' min={0} fullwidth /> </col> <col xs={1}> <textfield type='number' floatinglabeltext='xl' ref='sizexl' min={0} fullwidth /> </col> <col xs={1}> <textfield type='number' floatinglabeltext='2xl' ref='size2xl' min={0} fullwidth /> </col> <col xs={1}> <textfield type='number' floatinglabeltext='3xl' ref='size3xl' min={0} fullwidth /> </col> </row> <flatbutton style={{width: '100%'}} label='add order' onclick={() => {this.onaddorder(); this.onreset(); }} /> <br /> </form> </div> ); } } export default withstyles(orderform, s);
i think jquery not load correctly or added jquery library file mismatch reactjs. load current version jquery library file
https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
Comments
Post a Comment