使用功能组件反应条件重新渲染不起作用

Question

有人可以解释为什么“条件”在收到响应并设置状态时更改时不会触发重新渲染？

运行此代码时，即使响应为真，它也始终重定向到“/unauthorized/login”。我认为当状态改变时页面总是会重新渲染。

const PrivateRoute = props => {
const [condition, setCondition] = useState('');

useEffect(() => {
    if (!condition) {
        getUserAccess();
    }
}, [condition]);

const getUserAccess = async () => {
    const response = await axios.get("/some-api");
    const status = response.data; /* status will either be true or false */
    setCondition(status);
}

return condition ? (<Route path={props.path} exact={props.exact} component={props.component}/>) :
    (<Redirect to="/unauthorized/login"/>); 
};

export default PrivateRoute;

Answer 1

您应该/可以使用第三个“未决”状态，它既不是明确的真也不是假的，并等待 GET 请求解决。没有这个，私有路由组件不会等待解析状态，而是使用错误的 ('') 初始 condition 状态并呈现重定向。

const PrivateRoute = props => {
  const [condition, setCondition] = useState(null);

  useEffect(() => {
    if (!condition) {
      getUserAccess();
    }
  }, [condition]);

  const getUserAccess = async () => {
    try {
      const response = await axios.get("/some-api");
      setCondition(response.data);
    } catch(err) {
      // handle any error logging, etc..
      setCondition(false); // clear "loading state" so redirect can happen
    }
  }

  if (condition === null) {
    return <Spinner />; // or any other "pending" UI indication
  }

  return condition ? (
    <Route {...props} />
  ) : (
    <Redirect to="/unauthorized/login"/>
  );
};

Answer 2

这是因为您的condition 在初始渲染中是!'' = false。

所以它总是达到你的第二个条件：<Redirect to="/unauthorized/login"/> 而没有机会让useEffect 运行。

要解决这个问题，您需要有一个loading 指示符，让您的组件知道您正在等待响应：

类似这样的：

const PrivateRoute = props => {
const [condition, setCondition] = useState('');
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
    if (!condition) {
        getUserAccess();
    }
}, [condition]);

const getUserAccess = async () => {
    const response = await axios.get("/some-api");
    const status = response.data; /* status will either be true or false */
    setCondition(status);
    setIsLoading(false);
}

if (isLoading) return <h1>Loading...</h1>;

return condition ? (<Route path={props.path} exact={props.exact} component={props.component}/>) :
    (<Redirect to="/unauthorized/login"/>); 
};

export default PrivateRoute;

Answer 3

Axios 是基于 Promise 的库

const [condition, setCondition] = useState(false);

useEffect(() => {
        if (!condition) {
            axios.get("https://jsonplaceholder.typicode.com/posts/1")
            .then( (response) =>{
                //console.log(response.data)
                setCondition(response.data)
            })
            .catch(
                (error)=>{
                    console.log(error);
                }
            )
        }
    }, [condition]);