我在一个React组件中添加了一个Room Popup，用户可以添加一个或多个房间，并提供带有一些输入字段的Rooms的描述。
添加功能正常。但是假设如果在添加Room1，Room2，Room3之后删除第二个房间（房间2）并附有相应描述，则显示屏显示房间1和房间2而不是房间1和房间3。我还维护一个对象数组作为json发送到Service，其中每个对象代表一个房间，在删除Room2后，阵列只使用Room 1和Room3数据正确更新。反应重新呈现弹出窗口的控制台.log显示Room1和Room3的数组数据，但在屏幕上只显示room1和room2数据。
getInitialState() {
return {
add_rooms:[{
"resourceEmail":"",
"resourceName":"",
"resourceLocation":"Australia-Melbourne",
"resourceType":"",
"resourceDesc":"",
"resourcePhone":"",
"resourceCapacity":"",
"systemId":"",
"resourceStatus":"Y",
"groupMailId":"",
"resourceDropStatus":""
}],
}
},
<Modal id="modal_edit"
show={this.state.show_add}
onHide={this.hideModal}
container={this}
aria-labelledby="contained-modal-title">
<Modal.Body>
<span className="popup_close" onClick={this.closeAddpop}></span>
<div className="pop_head_edit">
ADD ROOMS
</div>
<div className="pop_ul_div" id="add_modal" >
{this.state.add_rooms.map(function(add,index)
{
console.log("re-rendering");
console.log("addrooms",this.state.add_rooms);
console.log("index "+ index);
return(<ul className="pop_ul add_rooms_ul" id={"add_room_list_"+index}>
<li>
<span>LOCATION</span>
<select value={this.state.add.resourceLocation} onChange={this.handleRoomAdd.bind(this,"location",index)}>
{this.state.room_locations.map(function(obj,ind){
return(
<option value={obj}>{obj}</option>)}.bind(this))}
</select>
</li>
<li>
<span>ROOM NAME</span>
<input type="text" name="name" value={this.state.add.resourceName} onChange={this.handleRoomAdd.bind(this,"name",index)}/>
</li>
<li>
<span>ROOM DESCRIPTION</span>
<input type="text" name="desc" maxLength="25" value={this.state.add.resourceDesc} onChange={this.handleRoomAdd.bind(this,"desc",index)}/>
</li>
<li>
<span>ROOM CAPACITY</span>
<input type="text" maxLength="3" value={this.state.add.resourceCapacity} onChange={this.handleAddCapacityChange.bind(this,index)}/>
</li>
<li>
<span>ROOM TYPE</span>
<select value={this.state.add.resourceType} onChange={this.handleRoomAdd.bind(this,"type",index)} >
{this.state.roomTypeList.map(function(obj,ind){
return(
<option value={obj}>{obj}</option>)}.bind(this))}
</select>
</li>
<li>
<span>ROOM STATUS</span>
<select value={this.state.add.resourceDropStatus} onChange={this.handleRoomAdd.bind(this,"dropStatus",index)}>
{this.state.roomStatusList.map(function(obj,ind){
return(
<option value={obj}>{obj}</option>)}.bind(this))}
</select>
</li>
<li>
<span>ROOM PHONE NUMBER</span>
<input type="text" name="" maxLength="25" value={this.state.add.resourcePhone} onChange={this.handleAddNumberChange.bind(this,index)}/>
</li>
<li>
<span>ROOM EMAIL</span>
<input type="text" value={this.state.add.resourceEmail} onBlur={this.handleRoomAdd.bind(this,"email",index)}/>
</li>
<li>
<span>SYSTEM ID AS IN CISCO TMS</span>
<input type="text" value={this.state.add.systemId} onChange={this.handleAddSysIdChange.bind(this,index)}/>
</li>
<li>
<span>LOCATION IMG EMAIL</span>
<input type="text" name="" maxLength="200" value={this.state.add.groupMailId} onBlur={this.handleRoomAdd.bind(this,"groupMail",index)}/>
</li>
<li>
</li>
<li>
<button className="del_room" onClick={this.del_click.bind(this,index)}></button>
</li>
</ul>)}.bind(this))}
<div className="add_room_div">
<button className="add_rooms" onClick={this.add_click}></button>
</div>
</div>
<div className="footer_edit_pop">
<div className="update_chk_bx_div">
<div className="chk_div">
<button className="dwnld_img" onClick={this.saveAddPop}>SAVE</button>
<button className="dwnld_img" onClick={this.closeAddpop}>CANCEL</button>
</div>
</div>
</div>
</Modal.Body>
</Modal>
{this.state.loading?
<div>
<div className = "loader_react"></div>
<div className = "loader_block_react"></div>
</div>
:
null
}
</div>
)
}
})
add_click: function()
{
var addRoom ={
"resourceEmail":"",
"resourceName":"",
"resourceLocation":"Australia-Melbourne",
"resourceType":"",
"resourceDesc":"",
"resourcePhone":"",
"resourceCapacity":"",
"systemId":"",
"resourceStatus":"Y",
"groupMailId":"",
"resourceDropStatus":""
};
this.state.add_rooms.push(addRoom);
},
del_click: function(index)
{
//debugger;
let mainIndex=index;
console.log("mainIndex", mainIndex);
var rooms= this.state.add_rooms
rooms.splice(mainIndex,1);
this.setState({add_rooms:rooms},function(){
console.log("add_rooms",this.state.add_rooms);
line 0;
});
},
line -0：/ *删除del_click中的房间后，add_rooms显示应该存在的两个房间，并重新呈现ADD-Rooms弹出窗口，但它显示已删除的房间减去其他有效房间* / < / p>
答案 0 :(得分：0)
在添加会议室时，您正在直接改变状态，并在删除正在使用setState的房间时导致此问题。
React docs声明
不要直接改变
this.state，因为之后可能会调用setState()替换你所做的突变。将this.state视为好像 不可变的。
您可以将项添加到状态数组，如
add_click: function()
{
var addRoom ={
"resourceEmail":"",
"resourceName":"",
"resourceLocation":"Australia-Melbourne",
"resourceType":"",
"resourceDesc":"",
"resourcePhone":"",
"resourceCapacity":"",
"systemId":"",
"resourceStatus":"Y",
"groupMailId":"",
"resourceDropStatus":""
};
this.setState(prevState => ({add_rooms: prevState['add_rooms'].concat(addRoom)}))
},