我有一个prent组件，该组件从redux状态获取一些道具并将这些道具传递给子组件，在子组件中，我根据这些道具设置了组件的状态。当我更新子组件的状态时，redux状态也正在更新。以下是我的父母感
class ViewPlaybooks extends React.Component {
state = {
openDeleteDialog : false,
id: 0,
};
gotoEditDrip(drip) {
this.props.showeditDripDialogAction();
this.props.changeSelectedDripebookAction(drip);
}
closeDripDialog() {
this.props.hideDripDialogAction();
}
render() {
const {EditDripDialog, EditWelcomeDialog} = this.props;
if (this.props.showSuccessMessage) {
console.log('dispatch');
setTimeout(() => {
this.props.hidePlaybooksASuccessAction();
}, 100);
}
if (this.props.showAlertMessage) {
console.log('dispatch');
setTimeout(() => {
this.props.hidePlaybooksAlertActions();
}, 100);
}
return (
<div className="px-5 pb-5 flex-class-custom flex-wrap col-xl-12 col-lg-12 col-md-12 col-12">
{
this.props.drips.map(object_ => {
if(object_ !== undefined && this.props.selectedWebsite.id === object_.website) {
return <Card style={{"margin": "20px", "height": "300px", "width": "30%", "padding": "0px","padding-bottom": "15px", "padding-top": "15px"}}
className="flex-class-custom shadow border-0 col-lg-4 col-md-4 col-sm-12 col-12">
{object_.enabled ?
<span className='active-cust'>Active</span>
:
<span className='inactive'>Inactive</span>
}
{/*<DeleteIcon onClick={() => this.setState({openDeleteDialog: true, id: object_.id})} style={{"margin-left" : "auto"}} />*/}
<CardBody style={{"flex-direction": "column", "align-items": "flex-start", "padding": "10px"}} className='flex-class-custom'>
<h4 className="card-title">{object_.title}</h4>
<CardSubtitle style={{"height": "50px"}}>{object_.description}</CardSubtitle>
<div style={{"width" : "100%", "margin-top": "20px"}} className='flex-class'>
<div className='welcome-card-div'>
<span>Sent</span>
<span>{object_.sent}</span>
</div>
<div style={{"border-left": "1px solid", "border-right": "1px solid"}} className='welcome-card-div'>
<span>Clicks</span>
<span>{object_.opened}</span>
</div>
<div className='welcome-card-div'>
<span>CTR</span>
<span>{object_.ctr}</span>
</div>
</div>
<Button style={{"align-self": "center", "margin-top": "25px"}} onClick={() => this.gotoEditDrip(object_)} variant="contained" className="bg-primary text-white">Edit</Button>
<EditDrip drips={{...object_}} openDialog={EditDripDialog} closeDialog={() => this.closeDripDialog()} />
</CardBody>
</Card>
}
})
}
{this.props.showSuccessMessage && NotificationManager.success(this.props.successMessage)}
<NotificationContainer/>
{this.props.showAlertMessage && NotificationManager.error(this.props.alertMessage)}
<NotificationContainer/>
</div>
)
}
}
const mapDispatchToProps = dispatch => ({
hidePlaybooksAlertActions: () => dispatch(hidePlaybooksAlertActions()),
});
const mapStateToProps = state => ({
drips: state.Playbooks.drips,
});
export default withRouter( connect(
mapStateToProps,
mapDispatchToProps
) (ViewPlaybooks))
这是我的子组件
function Transition(props) {
return <Slide direction="up" {...props} />;
}
class EditDrip extends React.Component {
state = {
open: false,
device: '',
type: '',
drips: {...this.props.drips.drips}
};
handleRequestClose = () => {
this.setState({ open: false });
};
handleTitleChange = index => event => {
let old_state = this.state.drips
old_state[index].title = event.target.value;
this.setState({drips: old_state})
};
handleMessageChange = index => event => {
let old_state = this.state.drips
old_state[index].message = event.target.value;
this.setState({drips: old_state})
};
handleUlrChange = index => event => {
let old_state = this.state.drips;
old_state[index].url = event.target.value;
this.setState({drips: old_state})
};
onIconChange = index => event => {
let old_state = this.state.drips;
old_state[index].icon = event.target.files[0];
this.setState({ drips: old_state});
// this.setState({showDialogIcon: true})
};
addDrip = () => {
let old_state = this.state.drips;
old_state.push({title: '', message: '', url: '', icon: null})
this.setState({ drips: old_state});
};
removeDrip = index => event => {
let old_state = this.state.drips;
old_state.splice(index, 1);
this.setState({ drips: old_state});
};
handleTypeChange = (device, type) => {
this.setState({ device: device, type: type })
};
UpdatePrompt = () => {
for(let drips of this.state.drips) {
}
};
closeDialog = () => {
this.setState({drips: this.props.drips.drips});
this.props.closeDialog();
};
render() {
const openDialog = this.props.openDialog;
if (this.props.showSuccessMessagePromptChange) {
console.log('dispatch');
setTimeout(() => {
this.props.hideSuccessMessageChangePrompt();
}, 100);
}
return (
<div>
<Dialog
fullScreen
open={openDialog}
onClose={this.props.closeDialog}
TransitionComponent={Transition}
>
<AppBar className="position-relative">
<Toolbar>
<div className="d-flex flex-row justify-content-between align-items-center w-100">
<div className="d-flex flex-row align-items-center ">
<IconButton onClick={() => this.closeDialog()} aria-label="Close">
<CloseIcon />
</IconButton>
<Typography variant="title" color="inherit">
Edit Drip
</Typography>
</div>
<div className="d-flex flex-row">
<Button size="small" onClick={() =>this.UpdatePrompt()}>
Save
</Button>
<Button size="small" onClick={() => this.closeDialog()}>
Discard Changes
</Button>
</div>
</div>
</Toolbar>
</AppBar>
<div className="row" style={{ 'flex-wrap': 'no wrap', "flex-direction": 'column', "align-items": "center" }}>
{
this.state.drips.length > 0 ?
this.state.drips.map((object_, index) => {
{console.log(object_)}
if (object_ !== undefined) {
return <CardBox styleName="col-lg-5 col-sm-12"
heading="">
<form className="row" noValidate autoComplete="off"
style={{"flex-wrap": "no-wrap", "flex-direction": "column"}}>
<DeleteIcon onClick={this.removeDrip(index)} style={{"margin-left" : "auto"}} />
<div className="col-md-12 col-12">
<TextField
id="campaign_name"
label="Title"
value={object_.title}
onChange={this.handleTitleChange(index)}
margin="normal"
fullWidth
/>
</div>
<div className="col-md-12 col-12" style={{
"display": "flex",
"align-items": "center",
"justify-content": "center"
}}>
<TextField
className="col-md-12 col-12"
id="url"
label="Message"
value={object_.message}
onChange={this.handleMessageChange(index)}
margin="normal"
fullWidth
/>
</div>
<div className="col-md-12 col-12">
<TextField
id="name"
label="URL"
value={object_.url}
onChange={this.handleUlrChange(index)}
margin="normal"
fullWidth
/>
</div>
<div className="col-md-12 col-12" style={{ "margin-bottom": "15px", "display": "flex", "align-items": "center", "margin-top": "20px" }}>
<span style={{ "width": "20%", "margin-right": "20px" }}>Icon: </span>
<div className="inputfile">
Upload
<input className='hide_file' type="file" onChange={this.onIconChange(index)} />
</div>
{object_.icon !== null && typeof object_.icon === "string"?
<img style={{"width": "50px", "margin-left": "auto"}} src={object_.icon} />
:
null
}
{object_.icon !== null && typeof object_.icon === 'object'?
<span style={{"margin-left": "auto"}}>{object_.icon.name}</span>
:
null
}
</div>
</form>
</CardBox>
}
}):null
}
<Button style={{"align-self": "center", "margin-top": "25px"}} onClick={this.addDrip} variant="contained" className="bg-primary text-white">Add</Button>
</div>
</Dialog>
</div>
);
}
}
const mapDispatchToProps = dispatch => ({
UpdateDripPlaybookAction: (payload) => dispatch(UpdateDripPlaybookAction(payload))
});
const mapStateToProps = state => ({
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(EditDrip)
无论我在set props.drips.drips的状态下也进行了更新，如何防止这种情况？