Question

如果存在数组，我想创建并显示一个select。但是，我收到错误：

undefined不是评估_studentYears2.default [this.props.selectedView] .options

的对象

有什么想法吗？

我有一个生成选项的函数：

createSelectItems() {
    const listItems = studentYears[ 
        this.props.selectedView
    ].options.map((option, i) => <Picker.Item label={option} value={i} />);
}

在我render我检查selectedView

if (this.props.selectedView) {
        const listItems = studentYears[
            this.props.selectedView
        ].options.map((option, i) =>
            <Picker.Item label={option} value={i} />
        );

        selectList = (
            <Picker selectedValue={0} onValueChange={this.onChange}>
                {listItems}
            </Picker>
        );
    } else {
        selectList = null;
    }

并显示selectList：

     <View>{selectList}</View>

我的示例数据是：

   export default {
    studentYears: [
        {
            id: 0,
            title: "Year 1",
            value: 1,
            options: ["Firm 1", "Firm 2", "Firm 3"]
        },
        {
            id: 1,
            title: "Year 2",
            value: 2,
            options: ["Firm 2", "Firm 3", "Firm 4"]
        },
        {
            id: 2,
            title: "Year 3",
            value: 3,
            options: ["Firm 5", "Firm 6", "Firm 7"]
        }
    ]
};

我导入的数据如下：

import { studentYears } from "../data/studentYears.js";

我想创建一个选项列表，具体取决于从之前的选择列表中选择的学生年份。

所以在我的第一个选择列表中，如果我选择第1年。我希望第二个选择列表显示选项Firm 1，Firm 2，Firm 3

Answer 1

const studentYears = [
    {
        id: 0,
        title: "Year 1",
        value: 1,
        options: ["Firm 1", "Firm 2", "Firm 3"]
    },
    {
        id: 1,
        title: "Year 2",
        value: 2,
        options: ["Firm 2", "Firm 3", "Firm 4"]
    },
    {
        id: 2,
        title: "Year 3",
        value: 3,
        options: ["Firm 5", "Firm 6", "Firm 7"]
    }
];
class SelectRenderer extends React.Component {


render() {
 return (
  <select>
   {
    studentYears.map((element) => {
     return (
      <option value={element.id}>{element.value}</option>
     )
    })
   }
   </select>

 )
}
}
ReactDOM.render(<SelectRenderer />, document.getElementById("test"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test"></div>

上面实施的简单选择。它可能有助于解决您的问题。

Answer 2

  <select>
   {
    studentYears.map((element,index) => {
     return (
      <option value={element.id}>{element.value}</option>
     )
    })
   }
   </select>

你不应该写studentYears[key]，因为它已经是一个数组，自动地图函数将处理key和index。

Answer 3

我创建了一个关于如何实现这一目标的示例，我从州的第一个选择列表中选择了年份，并根据此值从studentYears找到所选对象，取其options并创建另一个选择列表。由于所选年份处于该状态，因此每次用户选择不同年份时，将使用与当前所选年份相对应的选项更新第二选择列表。

因此带选项的第二个选择列表将始终与所选年份同步。这是代码：

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      selectedYear: undefined,
      selectedOption: undefined
    };
    this.onSelectYearChange = this.onSelectYearChange.bind(this);
    this.onSelectOptionChange = this.onSelectOptionChange.bind(this);  
    this.getOptionsBySelectedYear = this.getOptionsBySelectedYear.bind(this);  
  }
  onSelectYearChange(event) {
    this.setState({ selectedYear: event.target.value });
  }
  onSelectOptionChange(event) {
    this.setState({ selectedOption: event.target.value });
  }
  getOptionsBySelectedYear() {
    const selectedYear = this.state.selectedYear;
    const selectedYearObject = selectedYear ? studentYears.find(s => s.value == selectedYear) : [];

    return selectedYearObject ? selectedYearObject.options : [];
  }
  render() {
    const { selectedYear, selectedOption } = this.state;
    const selectedYearOptions = this.getOptionsBySelectedYear();
    return (
      <div>
        <select onChange={this.onSelectYearChange} value={this.state.selectedYear}>
          <option value=''>None</option>
          { 
            studentYears.map((element) => (<option value={element.value}>{element.value}</option>))
          }
      </select>
      <br />
      {selectedYear && (
          <select onChange={this.onSelectOptionChange} value={selectedOption}>
            <option value=''>None</option>
            {
              selectedYearOptions.map((option) => (<option value={option}>{option}</option>))
            }
          </select>)
      }
    </div>
    )
  }
}

以下是codesandbox上的一个工作示例。

从数组创建选择列表

3 个答案: