In the edit page, by redux useSelector method data available to the component but it is not setting initial values. How to set it?
import React,{useState} from 'react' import { useSelector } from 'react-redux' import {updateUserInfo} from '../actions/User' const EditUser = (props) => { const user = useSelector(state => state.user) const [formData, setFormData] = useState({email: user.email ,fullName: user.fullName}) console.log(user) const handleSubmit = e =>{ e.preventDefault(); const id = props.match.params.id const data = new FormData() data.append('email', formData.email) data.append('fullName', formData.fullName) data.append('image', formData.image) props.dispatch(updateUserInfo(id,data,props.history)) // console.log(formData) } const handleChange = e =>{ setFormData({...formData, [e.target.name]: e.target.value }) } const fileHandle = (e) =>{ // console.log(e.target.files) setFormData({...formData,image: e.target.files[0]}) } return ( <React.Fragment> <h2>Edit Account</h2> {Object.keys(user).length > 0 && <> <form onSubmit={handleSubmit}> <label htmlFor="fullName">Full Name</label> <input type="text" name="fullName" value={formData.fullName} onChange={handleChange}/> <br /> <label htmlFor="email">Email</label> <input type="email" name="email" value={formData.email} onChange={handleChange}/> <br /> <label htmlFor="image">Upload Image</label> <input type="file" name="image" onChange={fileHandle}/> <br /> <button >Update</button> </form> </> } </React.Fragment> ) } export default EditUser
useEffect(() => {
setFormData({email:props.user.email || "", fullName: props.user.fullName || ""}) // update the state if data else it is empty string, if not mentioned empty string you will warning uncontrolled component to controlled component vice-versa
},[props.user])
useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.
When store value available to the component, props.user has properties and values then componentDidUpdate method works.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.