Javascript TypeError:无法将未定义或null转换为object（参考object.keys）

因此，代码的前提是基于国家、城市、城镇等创建一个动态下拉框。例如，选定的国家/地区选择将填充该选定国家/地区关联城市的二级下拉框

但是我收到了上面提到的错误信息。解决这个问题的最佳方法是什么

从“../../common/lib/redux fields”导入{fields}

class FieldsPage extends React.Component {

  constructor(props) {
    super(props)

    this.handleFirstLevelChange = this.handleFirstLevelChange.bind(this)
    this.handleSecondLevelChange = this.handleSecondLevelChange.bind(this)

    // Prepopulate with the first item for each level
    this.state = {
      firstLevel: Object.keys(props.options)[0],
      secondLevel: Object.keys(props.options)[0][0]
    }
  }

  handleFirstLevelChange(event) {
    this.setState({firstLevel: event.target.value});
  }

  handleSecondLevelChange(event) {
    this.setState({secondLevel: event.target.value});
  }

  onFormSubmit = () => {
    const { dynamicFields, fields } = this.props;

    const values = {
       ...fields.$values(),
      concepts: {
        ...dynamicFields,
      },
    };
  } 

  render() {

    // Dynamic drop-down box 
    const renderOption = item => <option value={item}>{item}</option>
    const firstLevelOptions = Object.keys(this.props.options).map(renderOption)
    const secondLevelOptions = this.props.options[this.state.firstLevel].map(renderOption)

    return (
      <View>
        <Form onSubmit={this.onFormSubmit}>
          <Block>
            <Select
              {...fields.donation}
              disabled={disabled}
              label="Donation"
              options={[
                { children: 'Two', value: 2 },
                { children: 'Four', value: 4 },
                { children: 'Eight', value: 8 },
                { children: 'Sixteen', value: 16 },
                { children: 'Thirty-Two', value: 32 },
                { children: 'Sixty-Four', value: 64 },
              ]}
            />
          </Block>
          <Block>
            <Select
              onChange={this.handleFirstLevelChange}
              {...fields.handleFirstLevelChange}
              disabled={disabled}
              label="handleFirstLevelChange"
              value={this.state.firstLevel}
            />
          </Block>
          <Block>
            <Select
              onChange={this.handleSecondLevelChange}
              {...fields.handleSecondLevelChange}
              disabled={disabled}
              label="handleSecondLevelChange"
              value={this.state.secondLevel}
            />
          </Block>
          <Button disabled={disabled} type="submit">
            <FormattedMessage {...buttonsMessages.submit} />
          </Button>
        </Form>
      </View>
    );
  }

}

const options = {
  "USA": ["New York", "San Francisco"],
  "Germany": ["Berlin", "Munich"]
}

class FieldsPage扩展了React.Component{
建造师（道具）{
超级（道具）
this.handleFirstLevelChange=this.handleFirstLevelChange.bind（this）
this.handleSecondLevelChange=this.handleSecondLevelChange.bind（this）
//为每个级别预先填充第一项
此.state={
第一级：Object.keys（props.options）[0]，
第二级：对象键（道具选项）[0][0]
}
}
HandleFirstLevel更改（事件）{
this.setState（{firstLevel:event.target.value}）；
}
handleSecondLevelChange（事件）{
this.setState（{secondLevel:event.target.value}）；
}
onFormSubmit=（）=>{
const{dynamicFields，fields}=this.props；
常量值={
…字段。$values（），
概念：{
…动态场，
},
};
} 
render（）{
//动态下拉框
const renderOption=item=>{item}
const firstLevelOptions=Object.keys（this.props.options）.map（渲染）
const secondLevelOptions=this.props.options[this.state.firstLevel].map（渲染）
返回(
);
}
}
常量选项={
“美国”：[“纽约”、“旧金山”]，
“德国”：[“柏林”、“慕尼黑”]
}

在上面的两行中，您正在定义的

对象下调用相同的
键。所以
这个.handleFirstLevel更改
指向
未定义
<代码>绑定
方法在函数的
原型
上可用。因此，您将遇到此错误
无法读取未定义的属性绑定（this.handleFirstLevelChange）

在上面的两行中，您正在定义的
对象下调用相同的
键。所以
这个.handleFirstLevel更改
指向
未定义
<代码>绑定
方法在函数的
原型
上可用。因此，您将遇到此错误
无法读取未定义的属性绑定（this.handleFirstLevelChange）

this.handleFirstLevelChange = this.handleFirstLevelChange.bind(this)
this.handleSecondLevelChange = this.handleSecondLevelChange.bind(this)