Question

伙计们，我现在开始使用React并决定开始学习表格。

我目前有这个代码，但它给我一个错误（在最后列出），据我所知，这可能是因为初始状态或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;

我目前正在收到此错误输出：

TypeError：无法读取未定义的属性“map”

选择 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 |     );

Answer 1

看起来你拼错了ComponentDidMount。它应该以小写字母开头：componentDidMount。否则它的另一种反应方法永远不会打电话。

React Forms：TypeError：无法读取未定义的属性“map”

1 个答案: