Question

这个功能组件正在重新渲染-

   const Profile = () => {
          const dispatch = useDispatch()
          const getProfile = useSelector((state) => state.getProfile);
          const logging = useSelector((state) => state.logging);
          const { profile} = getProfile;
          const { userInfo } = logging;
          const [profileDetails, setprofileDetails] = useState({ 
            bio: " ",
            social: {
              facebook: " ",
              youtube: " ",
              instagram: " ",
              linkedin: " ",
              twitter: " ",
              github: " ",
            },
          });
         
          setprofileDetails(profile);
         
        
          useEffect(() => {
            dispatch(getProfileAction())
           
          }, [ dispatch]);

我不知道它是怎么发生的，请帮忙。我曾尝试将 setState 放在 useEffecft 中，并且仅使用“[]”作为 useEffect 依赖项（即使控制台提示我添加其他依赖项），但它会无限地重新渲染。

其余代码-

 return (
    <>
      <div className={classes.profileEdit}>
        <div div className='container'>
          <div className={classes.profileEditgrid}>
            <div className={classes.profileEditimg}>
              <img src='/images/potrait.jpg' alt='profile' />
            </div>
            <div className={classes.profileEditProfile}>
              <div className={classes.ProfileLink}>
                <p>
                  <i className='fas fa-link'> </i>
                </p>
              </div>
              <div className={classes.ProfileLink}>
                <p>
                  <i className='fas fa-link'> </i>
                </p>
              </div>
              <h1>{userInfo.name}</h1>
              <h2>
                <i className='fas fa-envelope-square'></i>
                {userInfo.email}
              </h2>
              <div className={classes.profileEditformdiv1}>
                <h4>basic info</h4>
                <form className={classes.ProfileEditForm1}>
                  <label htmlFor='bio'>Bio</label>
                  <p name='bio'>{profileDetails.bio}</p>

                  <label htmlFor='dob'>Date of birth</label>
                  <p name='dob'></p>
                  <label htmlFor='location'>Location</label>
                  <p name='location'>{profileDetails.location}</p>
                  <label htmlFor='status'>Status</label>
                  <select name='status'>
                    <option>single</option>
                    <option>married</option>
                    <option>complicated</option>
                  </select>
                </form>
              </div>
              <p className={classes.ProfileEditgap}> </p>
              <div className={classes.profileEditformdiv2}>
                <h4>education</h4>
                <form className={classes.ProfileEditForm2}>
                  <label htmlFor='school'>school</label>
                  <input type='text' name='school' placeholder='school' />
                  <label htmlFor='degree'>degree</label>
                  <input type='text' name='degree' placeholder='degree' />
                  <label htmlFor='field of study'>field of study</label>
                  <input
                    type='text'
                    name='field of study'
                    placeholder='field of study'
                  />
                  <label htmlFor='from'>from</label>
                  <input type='text' name='from' placeholder='from' />
                  <label htmlFor='to'>to</label>
                  <input type='text' name='to' placeholder='to' />
                </form>
              </div>
            </div>
          </div>
          <div className={classes.ProfileEditSocial}>
            <h4>social links</h4>
            <form className={classes.ProfileEditform3}>
              <div>
                <p>
                  <a href={profileDetails.social.facebook}>
                    <i className='fab fa-facebook' />
                  </a>
                </p>

                <p>
                  <a href={profileDetails.social.twitter}>
                    <i className='fab fa-twitter'></i>
                  </a>
                </p>
              </div>
              <div>
                <p>
                  <a href={profileDetails.social.youtube}>
                    <i className='fab fa-youtube'></i>
                  </a>
                </p>

                <p>
                  <a href={profileDetails.social.instagram}>
                    <i className='fab fa-instagram'></i>
                  </a>
                </p>
              </div>
              <div>
                <p>
                  <a href={profileDetails.social.github}>
                    <i className='fab fa-github'></i>
                  </a>
                </p>
                <p>
                  <a href={profileDetails.social.linkedin}>
                    <i className='fab fa-linkedin'></i>
                  </a>
                </p>
              </div>
            </form>
            <Link to='/profile/edit'>
              <button>Edit</button>
            </Link>
          </div>
        </div>
      </div>
    </>
  );
};

export default Profile;

所以按钮点击功能只是把我带到其他页面，而不是在这个页面上做任何事情

Answer 1

您在组件主体中调用 setprofileDetails，它本质上是渲染方法，因此它尝试无限重新渲染（render、setprofileDetails、render、setprofileDetails ...）

您需要从效果或类似点击处理程序中调用 setprofileDetails

例如一个效果 -

useEffect(() => {
   dispatch(getProfileAction())
}, [dispatch])

useEffect(() => {
   setprofileDetails(profile)
}, [profile])

注意配置文件作为数组中的依赖项，因此任何时候 profile 更改，它都会重新运行影响并设置状态。

错误：重新渲染过多。 React 限制渲染次数以防止无限循环。无法找到导致它的代码

1 个答案: