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

Question

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

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

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

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

Answer 1

您不能在react documentation中使用带条件运算符的钩子。

您可以一直调用hook并将结果存储在变量中，而仅对渲染进行条件处理。

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

Answer 2

根据react docs，您不应在条件语句内调用钩子。相反，请在钩子中使用条件语句：As explained here

Answer 3

我在通过循环数组呈现的 Card 组件中使用了钩子，但我没有使用 key。添加密钥已修复错误。

cards.map(({ id, ...rest }) => (
  <Card key={id} id={id} {...rest} />
))