React Forms：TypeError：無法讀取未定義的屬性'map'

夥計們，我開始與React一起，並決定開始學習表單。React Forms：TypeError：無法讀取未定義的屬性'map'

我目前有這樣的代碼，但它給我一個錯誤（列在最後），據我的理解，這可能是因爲初始狀態或componentDidMount中的一個沒有傳遞給我的Select組件。如果你能幫助我解決這個問題，那就很好，但也可以指導我講一些關於這個主題或者一些教程的講座。

App.js

import React, { Component } from 'react'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import FormContainer from './containers/FormContainer'; 

class App extends Component { 

    render() { 
    return (
     <MuiThemeProvider> 
     <div> 
      <FormContainer /> 
     </div> 
     </MuiThemeProvider> 
    ); 
    } 
} 

export default App;

FormContainer.js

import React, { Component } from 'react'; 
import RaisedButton from 'material-ui/RaisedButton'; 
import Select from '../components/Select'; 

class FormContainer extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     breaksStatusOptions: [], 
     selectedBreakStatus: '' 
    }; 
    this.handleClearForm = this.handleClearForm.bind(this); 
    this.handleStatusSelect = this.handleStatusSelect.bind(this); 
    } 

    ComponentDidMount() { 
    this.setState({ 
     breakStatusOptions: ['Green', 'Yellow', 'Red', 'Black'], 
     selectedBreakStatus: 'Black' 
    }); 
    } 

    handleStatusSelect(e) { 
    this.setState({ selectedBreakStatus: e.target.value },() => 
     console.log('Breaks status options', this.state.selectedBreakStatus) 
    ); 
    } 

    handleClearForm(e) { 
    e.preventDefault(); 
    this.setState({ 
     selectedBreakStatus: '' 
    }); 
    } 

    render() { 
    return (
     <form className="container"> 
     <Select 
      name={'breaksStatus'} 
      placeholder={'Choose status of breaks'} 
      controlFunc={this.handleStatusSelect} 
      options={this.state.breakStatusOptions} 
      selectedOption={this.state.selectedBreakStatus} 
     /> 
     <RaisedButton 
      label="Clear" 
      secondary={true} 
      onClick={this.handleClearForm} 
     /> 
     </form> 
    ); 
    } 
} 

export default FormContainer;

Select.js

import React from 'react'; 
import PropTypes from 'prop-types'; 

const Select = props => 
    <div className="form-group"> 
    <select 
     name={props.name} 
     value={props.selectedOption} 
     onChange={props.controlFunc} 
     className="form-select" 
    > 
     <option value="">{props.placeholder}</option> 
     {props.options.map(opt => { 
     return (
      <option key={opt} value={opt}>{opt}</option> 
     ); 
     })} 
    </select> 
    </div>; 

Select.propTypes = { 
    name: PropTypes.string.isRequired, 
    options: PropTypes.array.isRequired, 
    selectedOption: PropTypes.string, 
    controlFunc: PropTypes.func.isRequired, 
    placeholder: PropTypes.string 
}; 

export default Select;

，目前我得到這個錯誤輸出：

類型錯誤：無法讀取未定義

選擇 的C財產 '地圖'：/javascript/react/search-app/src/components/Select.js：13

10 | className="form-select" 
    11 | > 
    12 | <option value="">{props.placeholder}</option> 
> 13 | {props.options.map(opt => { 
    14 |  return (
    15 |  <option key={opt} value={opt}>{opt}</option> 
    16 | );

來源

2017-08-09 ricardoNava

'breaksStatusOptions'的拼寫錯誤（用** s **聲明，但沒有傳入）。奇怪的是，'Select.propTypes'在之前沒有提醒你：你是否在測試生產版本？ –

您的代碼中有**錯別字** ** ** **'breakStatusOptions' ** 2中的多餘的錯誤** **生命週期方法中的大寫C應該是'componentDidMount'。投票結束這些問題。 –

我沒有一個教程或指導給你閱讀文檔以外的其他內容。我也推薦你使用console.log（）。 I.e console.log（「選項的值：」+ this.state.breakStatusOptions）檢查值是否應該是。 – LordMarty

看起來你拼錯了ComponentDidMount。它應該以小寫字母開頭：componentDidMount。否則，它不同的方法反應將永遠不會調用。

來源

2017-08-09 07:10:25 Amid

問題在於render函數中'breaksStatusOptions'的拼寫錯誤。另外，如果錯誤的'ComponentDidMount'錯誤信息不應該被拋出，因爲那個狀態變量應該是一個空數組，但是（空的，但不是未定義的）。並且，當用** c **修復時，問題將會持續。無論如何，是的，這是一個雙重錯誤 –

是的這是真的，修復它，現在它的作品。 – ricardoNava

React Forms：TypeError：無法讀取未定義的屬性'map'

回答

相關問題