添加钩子组件时渲染的钩子比上一次渲染时更多

Question

我有一个 useInput 钩子组件，其工作方式如下：

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

它获取一个 (input,inputName) 并返回一个挂钩的输入组件。当我想在视图中动态更改现有输入的可见性时，出现错误：渲染的钩子比上一次渲染期间多。

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

Answer 1

从react 文档中，您不能使用带有条件运算符的钩子。

你可以一直调用 hook 并将结果存储在一个变量中，而只是调节渲染。

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

Answer 2

根据反应文档，您不应该在条件语句中调用钩子。相反，请在钩子中使用条件：如此处所述