使用函数初始化反应状态

Question

我正在尝试绑定下拉菜单以选择日期，我有年月日下拉菜单。我想显示从今年开始的过去 10 年。

我试过在构造函数中设置状态，然后也试过使用 componentDidMount 但它不起作用。找不到州年选项。

import React, { PropTypes } from 'react'
class DatePicker extends React.Component {
  state = {
    yearOptions: []
  }

  componentDidMount() {
    this.setState({ yearOptions:this.getYearsOptions() });
  }

  getYearsOptions = () => {
    let years = [];
    var currentYear = moment().add(-10, 'year').year();
    for (let index = 10; index >= 0; index--) {
        var year = currentYear + index;
        years.push({ key: year, value: year.toString(), text: year });

    }
    return years;
  };

  render () {
    const {yearOptions } = this.state;    
    return (
            <Form.Select                                                 
                   compact                                                   
                   selection                                                     
                   placeholder='Year'                                                    
                   options={yearsOptions}                                                    
                   name="birthDateYear" />
            );
  }
}

export default DatePicker ;

找不到州年选项

Answer 1

import React, { PropTypes } from 'react'
import moment from 'moment'
class DatePicker extends React.Component {
  state = {
    yearOptions: []
  }

  componentDidMount() {
    this.setState({ yearOptions: this.getYearsOptions() });
  }

  getYearsOptions = () => {
    let years = [];
    let currentYear = moment().add(-10, 'year').year();
    for (let index = 10; index >= 0; index--) {
      var year = currentYear + index;
      years.push({ label: year.toString(), value: year});
       // Clarity mentioned 
    }
    return years;
  };

  render() {
    const { yearOptions } = this.state;
    console.log("yearsOptions", yearOptions)
    return (
      <Form.Select
        compact
        selection
        placeholder='Year'
        options={yearOptions} //here spell mistake
        name="birthDateYear" />
    );
  }
}

export default DatePicker;

你犯了一个小拼写错误

Answer 2

options={yearsOptions}

应该是

options={yearOptions}

years.push({ key: year, value: year.toString(), text: year });

应该是

years.push({ value: year, label: year.toString()});

Answer 3

您应该在构造函数中设置初始状态。

import React, { PropTypes } from 'react'
        class DatePicker extends React.Component {
        constructor(props){  
           super(props)
           this.state = {
              yearOptions: this.getYearsOptions()
           }
        }

        getYearsOptions = () => {
           let years = [];
           var currentYear = moment().add(-10, 'year').year();
           for (let index = 10; index >= 0; index--) {
                var year = currentYear + index;
                years.push({ key: year, value: year.toString(), text: year });
            }
            return years;
          };

          render () {
            const {yearOptions } = this.state;    
            return (
                    <Form.Select                                                 
                           compact                                                   
                           selection                                                     
                           placeholder='Year'                                                    
                           options={yearsOptions}                                                    
                           name="birthDateYear" />
                    );
          }
        }

        export default DatePicker ;

使用函数初始化反应状态

Initialize react state using function

reactjs

react-state