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

我有一个更新对话框组件，它需要更新一些值。我的更新对话框如下所示

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)

class EditWebsiteComponent扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
};
}
handleChange=name=>event=>{
让temp=this.props.selectedWebsite；
temp[name]=event.target.value；
控制台日志（temp）；
此.props.changesSelectedWebsite（temp）；
//这是我的国家({
//[名称]：event.target.value，
// });
};
onFileChange=事件=>{
this.setState（{logo:event.target.files[0]}）；
};
render（）{
const openDialog=this.props.openDialog；
const{selectedWebsite}=this.props；
返回(
{/*{this.props.selectedWebsite&&this.props.selectedWebsite.title}*/}
{“编辑网站”}
接近
this.props.editWebsite（{title:selectedWebsite.title，url:selectedWebsite.url，logo:selectedWebsite.logo，id:selectedWebsite.id}）
}color=“primary”>
编辑
{this.props.showMessage&&NotificationManager.error（this.props.alertMessage）}
)
}
}
const mapDispatchToProps=调度=>({
editWebsite：（有效载荷）=>调度（editWebsite（有效载荷）），
changesSelectedWebsite：（有效负载）=>调度（changesSelectedWebsite（有效负载））
});
常量mapStateToProps=状态=>({
selectedWebsite:state.Websites.selectedWebsite，
});
导出默认连接(
MapStateTops，
mapDispatchToProps
)（编辑网站组件）

---

我从所选网站获取当前值，在更改时，我通过发送changesSelectedWebsite操作更新道具，但是对话框表单没有更新，尽管道具正在更新。我对react和redux非常陌生，所以我想问一下这种方法是否正确？因为我需要所选网站的值，而且如果用户更改了任何内容，我还需要更新。你能试着更改这行吗

this.props.changesSelectedWebsite(temp);

到

---

只要您在没有“重新创建”的情况下获得prop值，状态就不会感觉到更改，因此，{…temp}重新创建对象，为什么？因为它告诉状态这是一个新对象，并触发重新渲染器并保存新状态。

谢谢，它现在可以工作了。您能告诉我，我是否可以以任何方式将props.selectedWebsite保存为组件状态吗？因为我需要更改状态以防use不更新并关闭对话框？为此，我建议您在React文档中查找useEffect Cleanup，它在组件卸载时运行，在您的情况下，当对话框关闭时运行。

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