reactJS一個錯誤「類型錯誤：無法讀取的未定義的屬性‘量’」

我有一個問題，每當我執行的函數調用從文本字段中有一個錯誤reactJS一個錯誤「類型錯誤：無法讀取的未定義的屬性‘量’」

我setstate這道具碼值：

selectedOrder: { 
    breakdown: [{ 
     size: 'xs', 
     quantity: '0' 
    }, { 
     size: 's', 
     quantity: '0' 
    }] 
}

我的函數代碼如下：

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}) 
    } 
    }

和我爲我的文本框代碼

<TextField 
    type='number' floatingLabelText='XS' min={0} 
    value={_.findWhere(this.state.selectedOrder.breakdown, {size: 'xs'}).quantity} 
    onChange={this.onSizeChange.bind(this, 'xs')} 
    fullWidth />

這裏是我有錯誤的截圖。 425行是TextField的值行 [

這裏是完整的代碼。在功能上發生錯誤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);

來源

2016-03-07 dczii

在哪個函數中，你如何初始化狀態？ – Volune

函數onAddOrder。那麼錯誤發生，說明數量是不確定的TextField內 – dczii

我是否正確閱讀，有時大小爲小寫''xs''，有時大寫''XS''？ '_.findWhere'可能區分大小寫。 – Volune

我覺得你的Jquery無法正確加載，或者你加入jQuery庫文件不匹配reactJS。所以你加載當前版本的jquery庫文件

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

來源

2016-03-07 06:47:25

我不明白你的意思嗎？你能否詳細說明我的錯誤？ – dczii

ok顯示完整代碼 –

我編輯了我的問題，幷包含了我的完整代碼。函數onAddOrder被調用時發生錯誤。 – dczii

reactJS一個錯誤「類型錯誤：無法讀取的未定義的屬性‘量’」

回答

相關問題