当我添加用户值时，它将从添加用户页面添加。但是，当单击编辑链接并转到编辑页面时。我无法编辑名字，姓氏等值。请检查以下代码。
import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import Header from '../Header/Header.jsx';
import Footer from '../Footer/Footer.jsx';
import { userActions } from '../_actions';
class EditUser extends React.Component {
constructor(props) {
super(props);
this.state = {
edituser: {
first_name: '',
last_name: '',
username: '',
email: '',
active: '',
user_type: '',
profile_image: '',
social_link: '',
remove_by_admin: ''
},
submitted: false
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
this.props.dispatch(userActions.getUserDetails(this.props.match.params.id));
}
handleChange(event) {
const { name, value } = event.target;
const { user } = this.state;
this.setState({
user: {
...user,
[name]: value
}
});
}
handleSubmit(event) {
event.preventDefault();
this.setState({ submitted: true });
const { user } = this.state;
const { dispatch } = this.props;
if (user.first_name && user.last_name && user.username && user.email && user.active && user.user_type && user.profile_image && user.social_link && user.remove_by_admin) {
user.id = this.props.match.params.id;
dispatch(userActions.updateUserDetails(user));
}
}
render() {
const { user, users,edituser } = this.props;
let editUserData = '';
if(edituser.edituserdetails) {
editUserData = edituser.edituserdetails;
}
const {submitted } = this.state;
return (
<main className="wrapper">
<Header />
<div className="wrap_content update_profile">
<div className="container">
<div className="heading_block mb_24px"><h2 className="p_ttl">Edit Profile</h2></div>
<div className="content_block">
<div className="row upd_prof_cont">
<form className="theme_form" name="addCompanyForm" onSubmit={this.handleSubmit}>
<div className="col-md-4 aside_sidebar">
<div className="aside_content">
<div className="upl_cmp_logo white_box">
<p>Profile Image</p>
<div className="files_dropzone">
<input type="file" className="upl_inp_file" name="profile_image" />
<div className="comp_profpic">
<figure><img src="images/cmp-logo1.png" alt="" /></figure>
{submitted && !editUserData.profile_image &&
<div className="help-block">Profile Image is required</div>
}
</div>
</div>
</div>
</div>
</div>
<div className="col-md-8 article_desc">
<div className="article_content">
<div className="white_box update_details">
<div className="form-group">
<div className="fiels_row">
<div className="half_col">
<label className="lable-control">First Name</label>
<input type="text" className="form-control" placeholder="First Name" name="first_name" value={editUserData.first_name} onChange={this.handleChange} />
{submitted && !editUserData.first_name &&
<div className="help-block">First Name is required</div>
}
</div>
<div className="half_col">
<label className="lable-control">Last Name</label>
<input type="text" className="form-control" placeholder="Last Name" name="last_name" value={editUserData.last_name} onChange={this.handleChange}/>
{submitted && !editUserData.last_name &&
<div className="help-block">Last Name is required</div>
}
</div>
</div>
</div>
<div className="form-group">
<div className="fiels_row">
<div className="half_col">
<label className="lable-control">Email Address</label>
<input type="text" className="form-control" placeholder="Email" name="eamil" readOnly value={editUserData.email} onChange={this.handleChange}/>
{submitted && !editUserData.email &&
<div className="help-block">Email is required</div>
}
</div>
<div className="half_col">
<label className="lable-control">Username</label>
<input type="text" className="form-control" placeholder="Username" name="username" value={editUserData.username} onChange={this.handleChange} />
{submitted && !editUserData.username &&
<div className="help-block">Username is required</div>
}
</div>
</div>
</div>
<div className="form-group">
<div className="fiels_row">
<div className="half_col">
<label className="lable-control">Social Links</label>
<input type="text" className="form-control" placeholder="Social Links" name="social_links" value={editUserData.social_links} onChange={this.handleChange}/>
</div>
<div className="half_col">
<label className="lable-control">Active</label>
<select name="active" className="form-control" onChange={this.handleChange}>
<option value="1">active</option>
<option value="0">Not-active</option>
</select>
</div>
</div>
</div>
<div className="form_submit">
<button className="btn btn-primary btn-theme"><i className="fas fa-sign-in-alt"></i>Update Profile</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<Footer />
</main>
);
}
}
function mapStateToProps(state) {
console.log('state',state)
const { users, authentication,edituser } = state;
const { user } = authentication;
return {
user,
users,
edituser
};
}
const connectedEditUser = connect(mapStateToProps)(EditUser);
export { connectedEditUser as EditUser };
答案 0 :(得分：2)
您正在从道具读取render方法内的用户数据。例子
<label className="lable-control">First Name</label>
<input value={editUserData.first_name} type="text" className="form-control" placeholder="First Name" name="first_name" onChange={this.handleChange} />
editUserData源自this.props.editUser（渲染方法的第一行）
但是handleChange方法将数据设置在组件状态内。因此，更新后的名字在组件的状态之内，但道具中的名字仍然保持不变。
您应该使组件成为无状态且只能从道具中读取（并通过保持状态的父级提供的处理程序来更新用户详细信息），或者根本不应该从道具中读取并让组件拥有其道具拥有自己的状态并从状态中读取。
详细了解如何避免这种模式下的常见错误-here
编辑：这是一个更详细的博客，介绍如何避免或保证这种模式的安全-Click here