Javascript 在组件中使用渲染道具时，有哪些常见陷阱可以避免无限重渲染？

假设我们正在使用react router dom在react中实现受保护的路由，我们必须记住一些事情，例如在渲染私有路由时，组件会进入无限重渲染循环

这个路由给了我一个超过最大调用堆栈的错误，它阻止了无限重渲染。这个组件有什么问题？ privaterout.jsx

const PrivateRoute = ({
  component: Component,
  isAuthenticated,
  token,
  ...rest
}) => {
  const employee = decoder(token);
  return (
    <Route
      {...rest}
      render={props =>
        isAuthenticated && employee.user.emp_role === "admin" ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

PrivateRoute.propTypes = {
  isAuthenticated: PropTypes.bool
};

const mapStateToProps = state => ({
  isAuthenticated: state.authReducer.isAuthenticated,
  token: state.authReducer.token
});

export default connect(mapStateToProps, { loadUser })(PrivateRoute);

const privaterote=({
组件：组件，
我得到了认证，
代币
休息
}) => {
const employee=解码器（令牌）；
返回(
isAuthenticated&&employee.user.emp_角色===“管理员”(
) : (
)
}
/>
);
};
PrivateRoute.propTypes={
IsAuthentication:PropTypes.bool
};
常量mapStateToProps=状态=>({
isAuthenticated:state.authReducer.isAuthenticated，
令牌：state.authReducer.token
});
导出默认连接（MapStateTops，{loadUser}）（PrivateRoute）；

我使用从redux状态映射到道具，选择必要的部分，如isAuthenticated和token，token用于检查角色，可以是管理员或雇员，将它们放入三元运算符中，等等。此组件中的问题在哪里

编辑1： App.js

//此处导入
if（localStorage.token）{
setAuthToken（localStorage.token）；
}
函数App（）{
useffect（（）=>{
store.dispatch（loadUser（））；
}, []);
返回(
);
}
导出默认应用程序；

Login.jsx

const Login = ({ login, isAuthenticated, token }) => {
  const [formData, handleFormData] = useState({
    emp_phone: "",
    emp_password: ""
  });

  const { emp_password, emp_phone } = formData;

  const onSubmit = async e => {
    e.preventDefault();
    login(emp_phone, emp_password);
  };

  const handleLogin = e => {
    handleFormData({ ...formData, [e.target.name]: e.target.value });
  };

  // if (isAuthenticated) {
  //   const employee = decoder(token);
  //   if (employee.user.emp_role === "admin") {
  //     return <Redirect to="/admin" />;
  //   } else return <Redirect to="/representative" />;
  // }

  return (
    <Fragment>
      <div className="w-full max-w-sm shadow-md rounded p-5 m-3 align-middle h-auto">
        <form onSubmit={e => onSubmit(e)}>
          <div className="field self-center">
            <label className="label" htmlFor="phone">
              Phone Number
            </label>
            <div className="control">
              <input
                type="text"
                pattern="[0-9]*"
                id="phone"
                placeholder="Enter phone number"
                name="emp_phone"
                required
                value={emp_phone}
                onChange={e => handleLogin(e)}
                className="input"
              />
            </div>
          </div>
          <div className="field">
            <label className="label" htmlFor="password">
              Password
            </label>
            <div className="control">
              <input
                type="password"
                placeholder="Enter password"
                name="emp_password"
                id="password"
                value={emp_password}
                required
                onChange={e => handleLogin(e)}
                className="input"
              />
            </div>
          </div>
          <button type="submit" className="button is-primary">
            Login
          </button>
        </form>
      </div>
    </Fragment>
  );
};

Login.propTypes = {
  login: PropTypes.func.isRequired,
  isAuthenticated: PropTypes.bool
};

const mapStateToProps = state => ({
  isAuthenticated: state.authReducer.isAuthenticated,
  token: state.authReducer.token
});

export default connect(mapStateToProps, { login, loadUser })(Login);

const Login=（{Login，isAuthenticated，token}）=>{
常量[formData，handleFormData]=useState({
emp_电话：“，
emp_密码：“
});
const{emp_password，emp_phone}=formData；
const onSubmit=async e=>{
e、 预防默认值（）；
登录（emp_电话、emp_密码）；
};
const handleLogin=e=>{
handleFormData（{…formData[e.target.name]：e.target.value}）；
};
//如果（未经验证）{
//const employee=解码器（令牌）；
//if（employee.user.emp_role==“admin”）{
//返回；
//}否则返回；
// }
返回(
onSubmit（e）}>
电话号码
handleLogin（e）}
className=“输入”
/>
密码
handleLogin（e）}
className=“输入”
/>
登录
);
};
Login.propTypes={
登录名：PropTypes.func.isRequired，
IsAuthentication:PropTypes.bool
};
常量mapStateToProps=状态=>({
isAuthenticated:state.authReducer.isAuthenticated，
令牌：state.authReducer.token
});
导出默认连接（mapstatetops，{login，loadUser}）（login）；

我认为问题可能是由于使用了逻辑。这件事几周前也发生在我身上

isAuthenticated && employee.user.emp_role === "admin" ? (
      <Component {...props} />
    ) : (
      <Redirect to="/login" />
    )

isAuthenticated&&employee.user.emp\u角色==“admin”？(
) : (
)

在上面的代码中，当null或false（从本地存储加载期间）时，isAuthenticated的值可以多次为null，这会多次触发重定向组件

你能试试下面的逻辑吗

!isAuthenticated && employee.user.emp_role !== "admin" ? (
      <Redirect to="/login" />
    ) : (
      <Component {...props} />
    )

！isAuthenticated&&employee.user.emp_角色！==“管理员”？(
) : (
)

发生在哪条路线上？当它发生时，商店的状态是什么？我们在输入凭证后进入登录页面，url根据角色变化，比如说管理员角色，然后我得到最大的重新呈现错误；存储状态为isAuthenticated true，来自后端的令牌您可以共享您声明路由的组件吗？在我正在检查的登录页面中发现一个潜在的错误源isAuthenticated（从MapStateTops获得），然后根据角色将其重定向到其他页面，如果我将其注释掉，错误会消失，但功能不起作用。添加了我定义路由的App.js文件

!isAuthenticated && employee.user.emp_role !== "admin" ? (
      <Redirect to="/login" />
    ) : (
      <Component {...props} />
    )