在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 = () => {
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 });
};

Answer 2

我怀疑这是一个愚蠢的问题，事实确实如此。我忘了在componentDidMount函数中运行函数populateHotel_Types。因此，该状态没有得到适当的更新。我把这个留在这里，这样任何像我这样的新手都会得到这样一个场景的答案