javascript - 类型错误 : Cannot convert undefined or null to object (referring to Object. 键)

Question

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

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

从 '../../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"]
}

Answer 1

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

在上面两行中，您在正在定义的 this 对象下调用相同的 key。所以 this.handleFirstLevelChange 指向 undefined。 bind 方法可在函数的prototype 上使用。所以你会收到此错误无法读取未定义的属性绑定(bind)(this.handleFirstLevelChange)