javascript - 无法读取未定义的属性“值”-反应中的映射

Question

零件

populateOptions() {
    return this.props.options.map((option, i) => (
      <optgroup key={i} label={option.text}>
        {option.value.map((entry) => (
          <option>{entry.text}</option>
        ))}
      </optgroup>
    ));
 }

  render() {
    console.log(this.props.options);
    return (
      <div style={{position: 'relative'}} data-testid='select-list'>
        {this.props.title ? <label htmlFor={this.props.name}>

{this.props.title}</label> : ''}

    <div className={`select-list ${this.props.isInvalid ? 'input-field-error' : ''}`}>
      <select
        id={this.props.name}
        name={this.props.name}
        onBlur={this.handleOnBlur}
        onChange={this.handleChange}
        onFocus={this.handleOnFocus}
        tabIndex={this.props.tabIndex}
        type='text'
        value={this.props.value}>
        <option value='' disabled />
        {this.props.options.length > 0 && this.populateOptions()}
      </select>
      <div className='error-message'>{this.props.errorMessage}</div>
    </div>
    {this.props.description ? (
      <Tooltip
        alwaysVisibleMobile={true}
        text={this.props.description}
        shouldDisplay={this.state.isInputOnFocus}
        position={this.props.tooltipPosition}
        width={this.props.tooltipWidth}
      />
    ) : (
      ''
    )}
  </div>
);
  }
}

SelectList.propTypes = {
  description: PropTypes.string,
  errorMessage: PropTypes.string,
  isInvalid: PropTypes.bool,
  handleFieldValidation: PropTypes.func,
  name: PropTypes.string,
  onChange: PropTypes.func,
  onFocus: PropTypes.func,
  options: PropTypes.array,
  required: PropTypes.bool,
  tabIndex: PropTypes.number,
  title: PropTypes.string,
  tooltipPosition: PropTypes.string,
  tooltipWidth: PropTypes.string,
  value: PropTypes.any
};

要映射的数据

 {
  "description": "",
  "required": true,
  "title": "What is the finance for?",
  "errorMessage": "Please select an item in this list",
  "type": "select",
  "name": "finance_purpose",
  "options": [
    {
      "text": "Cashflow",
      "value": [
        {
          "text": "Stock purchase",
          "value": "stock"
        },
        {
          "text": "Equipment repairs",
          "value": "equipment_repairs"
        },
        {
          "text": "Bill or tax payment",
          "value": "bill_or_tax_payment"
        },
        {
          "text": "Debt refinancing",
          "value": "debt_refinancing"
        },
        {
          "text": "Seasonal trading",
          "value": "seasonal_trading"
        },
        {
          "text": "New contract",
          "value": "new_contract"
        },
        {
          "text": "Facilities improvement",
          "value": "facilities_improvement"
        },
        {
          "text": "Refurbishment",
          "value": "refurbishment"
        },
        {
          "text": "Cashflow headroom",
          "value": "cashflow_headroom"
        },
        {
          "text": "Experienced a bad debt",
          "value": "experienced_a_bad_debt"
        },
        {
          "text": "Other cashflow or working capital",
          "value": "other_cashflow"
        }
      ]
    },
    {
      "text": "Asset purchase",
      "value": [
        {
          "text": "Transport vehicles",
          "value": "transport_vehicles"
        },
        {
          "text": "Construction vehicles",
          "value": "construction_vehicles"
        },
        {
          "text": "Construction equipment",
          "value": "construction_equipment"
        },
        {
          "text": "Machinery",
          "value": "machinery"
        },
        {
          "text": "Printing equipment",
          "value": "printing_equipment"
        },
        {
          "text": "Agricultural equipment",
          "value": "agricultural_equipment"
        },
        {
          "text": "Other asset purchase",
          "value": "other_asset_purchase"
        }
      ]
    }
  ]
},

所以我收到这个错误无法读取未定义的属性值，我不确定为什么我要做的只是地图内的地图，有没有人有任何想法？当我控制台日志时"*console.log(option.value.map((entry) => entry.text))*"，我在控制台中获得了我想要的数据，但页面仍然错误并且没有加载。

理想情况下，我希望代码看起来像

populateOptions() {
    return this.props.options.map((option, i) => (
      <optgroup key={i} label={option.text}>
        <option>{option.value.map((entry) => entry.text)}</option
      </optgroup>
    ));
}

标签： javascriptreactjs

Answer 1

你需要像这样迭代，

populateOptions() {
    return this.props.options.map((option, i) => (
      <optgroup key={i} label={option.text}>
        {option.value.map((entry) => <option>{entry.text}</option>)}
      </optgroup>
    ));
  }

还要确保你得到了价值props

{this.props.options.length > 0 && this.populateOptions()}

演示