Поле выбора формы, не заполненное параметрами из состояния ReactJS

Question

Это моя функция выбора

import React from "react";

const Select = ({ name, label, options, error, ...rest }) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <select {...rest} id={name} name={name} className="form-control">
        <option value="" />
        {options.map((option) => (
          <option key={option.id} value={option.id}>
            {option.name}
          </option>
        ))}
      </select>
      {error && <div className="alert alert-danger">{error}</div>}
    </div>
  );
};

export default Select;

Это состояние компонента

state = {
    data: {
      vat: "",
      city: "",
      country: "",
      mobile_number: "",
      address: "",
      has_conference: false,
      star_rating: "",
    },
    errors: {},
    hotel_type: [],
  };

Эта функция для заполнения данных в hotel_type

populateHotel_Types = () => {
    let hotel_type = [...this.state.hotel_type];
    hotel_type = [
      { id: "hotel", value: "hotel", name: "Hotel" },
      { id: "apartment", value: "apartment", name: "Apartment" },
      { id: "villa", value: "villa", name: "Villa" },
    ];
    this.setState({ hotel_type });
  };

И, наконец, это функция рендеринга

           {this.renderSelect(
              "hotel_type",
              "Hotel Type",
              this.state.hotel_type
            )}

Функция выбора рендеринга

renderSelect(name, label, options) {
    const { data, errors } = this.state;
    return (
      <Select
        options={options}
        name={name}
        value={data[name]}
        label={label}
        onChange={this.handleChange}
        error={errors[name]}
      />
    );
  }

Теперь я изо всех сил пытаюсь получить данные, заполненные функцией renderselect. Я совсем новичок в реакции, и я действительно предполагаю, что это может быть глупый вопрос, поэтому будьте добры ко мне. Что может быть не так с этим кодом. Пожалуйста помоги. Спасибо

Answer 1

Я подозревал, что это был глупый вопрос, и это действительно так. Я забыл запустить функцию populateHotel_Types в функции componentDidMount. Следовательно, состояние не обновлялось должным образом. Я оставляю это здесь, чтобы любой новичок ie вроде меня получил ответ на такой сценарий

Answer 2

Я думаю, что в первую очередь у вас проблема:

populateHotel_Types = () => {
    let hotel_type = [...this.state.hotel_type];
    hotel_type = [
      { id: "hotel", value: "hotel", name: "Hotel" },
      { id: "apartment", value: "apartment", name: "Apartment" },
      { id: "villa", value: "villa", name: "Villa" },
    ];
    this.setState({ hotel_type });
  };

Здесь вы заполняете hotel_type своим состоянием. А ниже вы переопределяете массив, поэтому у вас будет только 3 новых объекта. Так что нужно сделать это, чтобы получить полный список:

 populateHotel_Types = () => {
    const hotel_type = [
       ...this.state.hotel_type,
      { id: "hotel", value: "hotel", name: "Hotel" },
      { id: "apartment", value: "apartment", name: "Apartment" },
      { id: "villa", value: "villa", name: "Villa" },
    ];
    this.setState({ hotel_type });
  };