Я создал представление в reactjs, в котором у меня есть один выпадающий список. когда страница загружается в первый раз, раскрывающееся значение остается пустым. Пользователь выбирает любое значение в раскрывающемся списке, затем API-интерфейс нажимает и получает ответ и показывает ответ в таблице ниже. И если пользователь изменяет значение в раскрывающемся списке, то снова получает ответ для другого идентификатора и показывает данные в таблице. До этого все работает нормально. Но когда я выбираю «Выбрать один» в раскрывающемся списке, который пуст, то я хочу скрыть таблицу. в этом сценарии выдается ошибка
«Uncaught DOMException: не удалось выполнить« removeChild »для« узла »: удаляемый узел не является дочерним по отношению к этому узлу.»
Я много искал, но ничего не нашел хорошего решения, которое работает с моим кодом.
handlePartnerChange = e => {
e.preventDefault();
let val = e.target.value;
console.log('val---->',val);
this.setState({
hold_partner_id:val,
syscoProductLoader:false,
}, () => {
if(val != '' && val != null && val != undefined){
console.log('val is not empty===>', val)
this.getAllSyscoProductByPartnerId(val);
}else{
console.log('val is empty===>', val)
this.setState({ syscoProductLists: [], apiError: "Please select the partner to display sysco product" },()=>{
console.log('this.state---->',this.state);
//$('#example').DataTable();
});
}
// console.log("this.state----------->", this.state);
});
}
<div className="main-body tableView">
{this.state.partnerLoader == true ? (
<Loader
type="TailSpin"
color="black"
height={80}
width={100}
style={{ textAlign: "center" }}
/>
) : this.state.partnerApiError == "" ? (
<div>
<button
type="button"
className="btn btn-darkone rightButton"
onClick={() => this.handleSyscoProductModalShowClick("Add", null)}
>
Add Product
</button>
<div className="page-header-title roleHeading bottom16">Sysco Product</div>
<label className="labelFont">Select Partner</label>
<select className="form-control tabelselect" style={{ border: "1px solid #818181" }} name="partnerId" value={this.state.hold_partner_id} onChange={this.handlePartnerChange}>
<option value="">Select one</option>
{this.state.partnerLists.map(
(partnerList, index) => (
<option
value={partnerList.id}
key={partnerList.id}
>
{partnerList.partner_name}
</option>
)
)}
</select>
<br />
<div>
{/* {this.state.hold_partner_id == "" ? (<div><b>Please select the partner to display products</b></div>) : ( */}
{this.state.syscoProductLoader == true ? (
<Loader
type="TailSpin"
color="black"
height={80}
width={100}
style={{ textAlign: "center" }}
/>
) :
this.state.apiError == "" ? (
<div>
<table
id="example"
className="table table-striped table-bordered table-responsive"
>
<thead className="tableHeadRow">
<tr>
<th style={{ width: "1%" }}>ITEM NO</th>
<th style={{ width: "1%" }}>CASE SIZE</th>
<th style={{ width: "2%" }}>UOM</th>
{/* <th style={{ width: "1%" }} >CATEGORY</th> */}
{/* <th style={{ width: "2%" }} >BRAND</th>
<th style={{ width: "1%" }} >PRODUCT</th>
<th style={{ width: "1%" }} >PRODUCT REBATE %</th>
<th style={{ width: "1%" }} >REBATE</th> */}
<th style={{ width: "1%" }} >PRODUCT REBATE $ PER CASE</th>
<th
style={{ width: "3%", color: "transparent" }}
></th>
</tr>
</thead>
<tbody >
{this.state.syscoProductLists.map((syscoProductList, index) => (
<tr key={syscoProductList.id}>
<td>{syscoProductList.Item_Number}</td>
<td>{syscoProductList.Case_Size}</td>
<td className="text-wrap">{syscoProductList.UOM}</td>
{/* <td className="text-wrap"><p >{syscoProductList.category}</p></td> */}
{/* <td ><p >{syscoProductList.Brand} </p></td>
<td ><p >{syscoProductList.Product}</p></td>
<td className="text-wrap"><p >{syscoProductList.Rebate_%}</p></td>
<td className="text-wrap"><p >{syscoProductList.rebate_factor}</p></td> */}
<td className="text-wrap"><p >{syscoProductList.Rebate_$_per_case}</p></td>
<td>
<div className="btn-group pull-right roleBtnGroup" >
<a
title="View"
style={{ width: "33%" }}
className="btn btn-mini"
onClick={e => {
this.handleSyscoProductModalShowClick("View", syscoProductList);
}}
>
<span className="mdi mdi-24px mdi-eye iconHover" />
</a>
<a
style={{ width: "100%" }}
className="btn btn-mini"
title="Delete"
onClick={() => this.handleConfirmModalShowClick(syscoProductList.id)}
>
<span className="mdi mdi-24px mdi-trash-can iconHover" />
</a>
</div>
</td>
</tr>
))}
</tbody>
{/* <tfoot>
</tfoot> */}
</table>
</div>
) : (
this.state.apiError == 'Please select the partner to display sysco product'?(
<div>
<b>{this.state.apiError}</b>
</div>
):(
<div>
<b>{this.state.apiError}</b>
<br/>
<button onClick={this.handleTryAgain}>Try Again</button>
</div>
)
)}
{/* )} */}
</div>
</div>
) : (
<b>{this.state.partnerApiError}</b>
)}
</div>