Есть форма с полем "добавить новую категорию" и "выбрать существующую" - тег "select". Через форму добавляю новую категорию. После добавления загружаю список всех категорий и изменяю состояние.
async loadCategories() {
const response = await fetch('/api/product/getCategories');
const data = await response.json();
this.setState({ categories: data });
}
Сбрасываю поля формы и если поле newCategory не пустое меняю состояние newSelectOption
resetForm() {
let newCat = this.newCategory.current.value;
if (newCat != "") {
this.loadCategories();
this.setState({ newSelectOption: newCat });
this.newCategory.current.value = "";
}
this.setState({ checkAddNewCat: false });
this.setState({ errors: null });
this.setState({ file: [] });
this.name.current.value = '';
this.description.current.value = "";
this.price.current.value = "";
this.fileInput.current.value = "";
}
и задаю его defaultValue для тега
<label>
Категория:<br />
{errors ? <Error field="ThisCategory" errors={this.state.errors} /> : null}
{!this.state.checkAddNewCat && this.state.categories.length > 0 ?
<select
className="select-category"
defaultValue={this.state.newSelectOption}
ref={this.thisCategory}
>
{this.state.categories.map(el => (
<option key={el.id} value={el.name}>{el.name}</option>
))}
</select>
: <span></span>
}
<div>
{errors ? <Error field="NewCategory" errors={this.state.errors} /> : null}
<input
type="text"
placeholder="создать категорию"
onChange={this.handleNewCategory}
ref={this.newCategory}/>
</div>
</label>
но тег "select" остаётся на последнем значении которое было выбрано, а нужно что бы по умолчанию оно выбрало новое добавленное значение категории.
Кстати если в состояние newSelectOption подставить старое значение то все работает оно его выбирает после отправки формы, а новое значение которое было добавлено нет.