Когда я добавлю значения моих пользователей, они будут добавлены со страницы добавления пользователя.Но когда нажимаете на ссылку редактирования и переходите на страницу редактирования.Я не могу редактировать значения, такие как имя, фамилия и т. д. Пожалуйста, проверьте мой код ниже.
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 };