如何使用道具更新我的表格 Reactjs

Question

I have an Update Dialog Component which needs to update some values. My update dialog looks like following.

class EditWebsiteComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }
    handleChange = name => event => {
        let temp = this.props.selectedWebsite;
        temp[name] = event.target.value;
        console.log(temp);
        this.props.changesSelectedWebsite(temp);
        // this.setState({
        //     [name]: event.target.value,
        // });
    };
    onFileChange = event => {
        this.setState({ logo: event.target.files[0] });
    };


    render() {
        const openDialog = this.props.openDialog;
        const {selectedWebsite} = this.props;

        return (
            <div>
                {/*{this.props.selectedWebsite && this.props.selectedWebsite.title}*/}
                <Dialog
                    fullWidth={true}
                    open={openDialog}
                    onClose={this.props.closeDialog}
                >
                    <DialogTitle>
                        {"Edit Website"}
                    </DialogTitle>
                    <DialogContent>
                        <FormControl className="w-100">
                            <TextField
                                style={{'margin-right': "10px"}}
                                className="col-md-11 col-11"
                                id="name"
                                label="Title"
                                value={selectedWebsite.title}
                                onChange={this.handleChange('title')}
                                margin="normal"
                                fullWidth
                            />
                            <TextField
                                style={{'margin-right': "10px"}}
                                className="col-md-11 col-11"
                                id="name"
                                label="URL"
                                value={selectedWebsite.url}
                                onChange={this.handleChange('url')}
                                margin="normal"
                                fullWidth
                            />
                            <div style={{"margin-top": "20px"}} className='col-md-11 col-11 flex-class-custom'>
                                <input type="file" onChange={this.onFileChange} />
                            </div>
                        </FormControl>
                    </DialogContent>
                    <DialogActions>
                        <Button onClick={this.props.closeDialog} color="secondary">
                            Close
                        </Button>
                        <Button onClick={() =>
                            this.props.editWebsite({title: selectedWebsite.title, url:selectedWebsite.url, logo:selectedWebsite.logo, id:selectedWebsite.id})
                        } color="primary">
                            Edit
                        </Button>
                    </DialogActions>
                </Dialog>
                {this.props.showMessage && NotificationManager.error(this.props.alertMessage)}
                <NotificationContainer/>
            </div>
        )
    }
}



const mapDispatchToProps = dispatch => ({
    editWebsite: (payload) => dispatch(editWebsite(payload)),
    changesSelectedWebsite: (payload) => dispatch(changesSelectedWebsite(payload))
});

const mapStateToProps = state => ({
    selectedWebsite : state.Websites.selectedWebsite,
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(EditWebsiteComponent)

I am getting the current values from selected website and on change i am updating the props by dispatching the changesSelectedWebsite action, but the dialog form is not being updated, although props are being updated. I am quite new to react and redux so i wanted to ask if this approach is right? and how else can i achieve this because i need values of selectedWebsites and also need to update if user changes anything.

Answer 1

Can you try changing this line

this.props.changesSelectedWebsite(temp);

to

this.props.changesSelectedWebsite({...temp});

As long as you are getting the prop value as is without "recreating it", the state wont feel the change, so, {...temp} recreates the object, why? because it tells the state that this is a new object and triggers a rerender and saves the new state.