Question

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {

  constructor(props){
    super(props);
    this.state={
    countryVal:''
    };

    this.handleChange3 = this.handleChange3.bind(this);
  };

   handleChange3(event){
    this.setState({countryVal:event.target.value});

  }

      render() {

      const {countryVal} = this.state
      const VIEWS = [
      {
        country: 'India', 
        states: ['Kerala', 'Karnataka','Tamil nadu'] 
      }, {
        country: 'America', 
        states: ['test1', 'test2', 'test3']
      }, {
        country: 'Africa', 
        states: ['test4', 'test5', 'test6']
      }
    ]

    const getMajorMethod = () => {
        const view = VIEWS.filter(({country}) => country === countryVal )[0]
        return(
            <select id="stateSelectId"  style={{'width':'150px','display':'block'}}>
                {view.states.map(m => <option>{m}</option>)}
            </select>

        )
    }     

      return (
      <div>
        <div style={{'border':'1px solid gray','padding':'20px','margin':'20px'}}>
            <select  onChange={this.handleChange3} style={{'width':'150px'}}>
                {VIEWS.map(({country}) => <option value={country}>{country}</option>)}
            </select>
            <br/><br/>
            {getMajorMethod()}
        </div>


     </div> 
    );
  }
}

export default App;

我正在尝试实施反应应用，其中状态下拉列表在选择国家/地区下拉列表时会发生变化。

但是我在选择菜单的加载状态时遇到问题。其抛出“ React throwing TypeError：undefined不是一个对象（正在评估'view.states'）”

在删除显示国家的“ {getMajorMethod（）}”时没有任何错误。

我是初学者。已经找到了许多类似的答案，但没有得到任何解决方案。

上面是APP.js中的代码

我提到了答案 Populate two dropdown based on selection in another 1 in react

Answer 1

我不是很了解您的数组过滤器的用途

const view = VIEWS.filter(({country}) => country === countryVal )[0]

但是我很确定您不会获得具有“ states”属性的对象，并且可以像这样进行迭代：

{view.states.map(m => <option>{m}</option>)}

您是否正在寻找这样的东西：

{view[0].states.map(m => <option>{m}</option>)}

？

Answer 2

终于解决了问题。

我忘了在VIEWS中为空的国家/地区选择设置countryVal：''值。

我对VIEW进行了如下修改，并且效果很好。

const VIEWS = [
      {
        country: '', 
        states: [''] 
      },
      {
        country: 'India', 
        states: ['Kerala', 'Karnataka','Tamil nadu'] 
      }, {
        country: 'America', 
        states: ['test1', 'test2', 'test3']
      }, {
        country: 'Africa', 
        states: ['test4', 'test5', 'test6']
      }
    ]

感谢重放人员

反应引发TypeError：未定义不是对象（正在评估“ view.states”）

2 个答案: