守法反应钩

Question

我正在寻找一种在渲染组件时在 map 函数中使用我的自定义钩子的方法......

仅供参考，我完全了解钩子规则">不要在循环、条件或嵌套函数中调用钩子。但我相信有一种方法可以在不违反规则的情况下解决它......

以下是更多信息：

我们有一个名为useCommaHook的自定义钩子，如下所示：

export const useCommaHook = price => {
const priceArray = price.toString().split("")
const beforeComma = priceArray.slice(0, 1).join("")
const afterComma = priceArray.slice(1, 4).join("")
return `${beforeComma},${afterComma}`
}

可用于在渲染时为货币添加逗号：

const renderTours = data => {
return data.map((element, idx) => {
return (
<span className="filtered-tour__description-price">
*** --> We'd like to use our hook here to get comma for every price in the loop***
{`from ${element.node.priceFrom}`
</span>
)
})
}

如上所述，我们希望将该过滤器应用于数组中的所有节点价格。

你会如何去解决这样的问题？任何想法都是值得赞赏的。

Answer 1

useCommaHook不是钩子！它不调用任何本机钩子(useState，...(。因此，钩子的规则不适用。

Answer 2

构建自己的 Hooks 可以将组件逻辑提取到可重用的函数中。但在这里，您的useCommaHook是一个简单的功能组件，其功能是

return `${beforeComma},${afterComma}`

你甚至没有在useCommaHook中使用本机钩子，并且你的函数中没有状态，所以状态钩子在你的代码中不适用。