正确更改挂钩后渲染组件答案

【问题标题】：Render a component after a hook is correctly changed正确更改挂钩后渲染组件
【发布时间】：2021-08-20 03:37:38
【问题描述】：

我想知道如何在组件改变钩子后渲染它。

例如，我使用 useEffect 在以下组件中所做的事情。但缺点是当我想使用该组件时：

‘HomeClienteOProveedor’不能用作 JSX 组件。它的回归 type ‘void’ 不是有效的 JSX 元素。

const HomeClienteOProveedor = () => {

  const [cliente, setCliente] = useState(true)

  getItem("clientType").then(res => {
    
    if (res=="1"){
     
      setCliente(true)
    
    }else{
      setCliente(false)
    } 
  })
    

  useEffect(() => {

    if (cliente){
      return ( ()=>{
        <HomeCliente />
     });
    }else{
      return ( ()=>{
        <HomeProveedor />
     });
    }

}, [ cliente]);
    
  
}

为什么我可以使用这样的东西：

 setCliente((true) => {
    console.log("its true!"); 
    
   
  });

【问题讨论】：

在组件主体部分使用if语句，将api调用放入使用效果

标签： reactjs typescript react-hooks tsx

【解决方案1】：

更惯用的方法是在效果中运行异步代码，然后根据有状态值调整渲染：

const HomeClienteOProveedor = () => {
  const [cliente, setCliente] = useState(true)

  useEffect(() => {
    getItem("clientType").then(res => {
      if (res == "1") {
        setCliente(true);
      } else {
        setCliente(false);
      } 
    })
  }, []);
     
  return cliente ? <HomeCliente /> : <HomeProveedor />
}

【讨论】：