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)

在上面两行中，您正在定义key对象下的同一this。所以this.handleFirstLevelChange指向undefined。 bind函数可以使用prototype方法。所以你收到此错误unable to read property bind of undefined(this.handleFirstLevelChange)

TypeError：无法将undefined或null转换为object（引用Object.keys）

1 个答案: