reactjs - 使用 redux 和 react hooks 时首选哪种生命周期方法？

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 方法也可以防止不必要的渲染。