使用redux和react挂钩时，首选哪种生命周期方法？

问题描述

在编辑页面中，通过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

解决方法

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挂钩作为componentDidMount，componentDidUpdate和componentWillUnmount的组合。

当存储值可用于组件时，props.user具有属性和值，然后componentDidUpdate方法起作用。

使用useEffect方法也可以防止不必要的渲染。