添加挂钩组件时，与上次渲染相比，呈现了更多的挂钩

问题描述

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

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

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

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

推荐答案

从react documentation不能将挂钩与条件运算符一起使用。

您可以一直调用钩子并将结果存储在变量中，而只需调整呈现条件。

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

这篇关于添加挂钩组件时，与上次渲染相比，呈现了更多的挂钩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！