添加挂钩组件时，比上一次渲染时渲染了更多挂钩

Question

我有一个使用输入钩子组件，其工作原理如下：

useInput(
    <input placeholder="phone number" />,
    "phone"
  )

它获取一个(input，inputName)并返回一个挂钩的输入组件。当我想动态地改变视图中现有输入的可见性时，我得到一个错误:渲染的钩子比之前渲染的多。

{this.state.showMyInput && useInput(
        <input placeholder="phone number" />,
        "phone"
      )
}

Answer 1

我的问题是我在代码上的返回语句后使用了useState挂钩，例如：

function myComponenet () {
   if(loading) {return <Loading/>}

   const [myVar, setMyVar] = React.useState({})

   // my main component UI begins here

   <View>.....</View>
}

我必须移动这个＜code＞const[myVar，setMyVar]=React。useState（{}）行，在＜code＞if语句

Answer 2

根据反应文档，您不应该在条件语句中调用钩子。相反，使用钩子中的条件：如这里所解释的

Answer 3

从 react 文档中，您不能将钩子与条件运算符一起使用。

您可以一直调用hook并将结果存储在一个变量中，只需调整渲染即可。

const input = useInput(input, inputName);
...    
{this.state.showMyInput && input}