如何解决react组件中的Changin状态也会更新redux状态
我有一个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","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的状态下也进行了更新，如何防止这种情况？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。