使用 redux 和 react 鈎子時首選哪種生命周期方法？

Question

在編輯頁面中，通過 redux useSelector 方法數據可用於組件但它沒有設置初始值。 如何設置？

1. 如何從商店設置初始 formData？
2. 在鈎子組件渲染中為什么會發生 4 次？

 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

Answer 1

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 作為 componentDidMount、componentDidUpdate 和 componentWillUnmount 的組合。

當存儲可供組件使用的值時，props.user 具有屬性和值，然后 componentDidUpdate 方法起作用。

useEffect 方法還可以防止不必要的渲染。