选择器未知在调用时返回根状态。这可能会导致不必要的重新渲染（警告）

Question

当我尝试转到另一个用户的个人资料页面时，我在控制台中收到无尽的警告，但我没有收到该页面，并且该页面上没有其他可做的事情，因此我必须关闭它并再次打开新的水龙头。

profileAction.js

import { GLOBALTYPES } from "./globalTypes";
import { getDataAPI } from "../../utils/fetchData";

export const PROFILE_TYPES = {
    LOADING: 'LOADING',
    GET_USER: 'GET_USER'
}


export const getProfileUsers = ({users, id, auth}) => async (dispatch) => {
    if(users.every(user => user._id !== id)){
        
        try {
            dispatch({type: PROFILE_TYPES.LOADING, payload: true})
            const res = await getDataAPI(`/user/${id}`, auth.token)
            console.log(res)

        } catch (err) {
            dispatch({
                type: GLOBALTYPES.ALERT, 
                payload: {error: err.response.data.msg}
            })
        }
    }
}

Info.jsx

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import Avatar from '../Avatar';
import { getProfileUsers } from '../../redux/actions/profileAction';

const Info = () => {
  const { id } = useParams()
  const { auth, profile } = useSelector(state => state);
  const dispatch = useDispatch()
  
  const [userData, setUserData] = useState([])

  useEffect(() => {
    if(id === auth.user._id){
      setUserData(auth.user)
      // console.log(userData)
    }else{
      dispatch(getProfileUsers({users: profile.users, id, auth}))
    }
  }, [id, auth.user, profile.users])

  const followed = userData.followers || []

  const follow = userData.following || []
  
  return (
        <div className='info'>
        {userData ? 
          <div className="info_container" key={userData._id}>
            <Avatar src={userData.avatar} size="supper-avatar"/>
            <div className="info_content">
              <div className="info_content_title">
                <h2>{userData.username}</h2>
                <button className="btn btn-outline-info">
                  Edit Profile
                </button>
              </div>
                <div className="follow_btn">
                  <span className="mr-4">
                    {followed.length} Followers
                  </span>
                  <span className="ml-4">
                    {follow.length} Following
                  </span>
                </div>
              <h6>{userData.fullname}</h6>
              <h6>{userData.email}</h6>
            </div>
          </div> : null
      }
    </div>
  )
}

export default Info

顺便说一句，我以前总是收到这个警告，但页面工作正常，警告也不是无休无止的

Answer 1

当您选择“太多状态”时，可能会发生这种情况，在这种情况下，您正在订阅 all 状态。换句话说，任何时候 任何状态更新，无论它是否与

Info

中解构/使用的内容相关，

Info

组件都会被触发重新渲染。

解决方案是缩小您选择的范围。

const auth = useSelector(state => state.auth);
const profile = useSelector(state => state.profile);

当任何

Info

或

auth

状态值发生变化时，这将触发

profile

重新渲染。

根据

Info

实际引用的代码，范围还可以进一步缩小。

const user = useSelector(state => state.auth.user);
const users = useSelector(state => state.profile.users);

现在，只有在

user

或

users

状态更新时才会触发组件重新渲染。