在 useMemo 解决方法中调用钩子

Question

目前我正在通过反应组件中的列表进行映射：

 const items = useMemo(()=> {
   return items.map(item=> {
      const element = useSearchResult(item)
    })
    ...
   }, [dependencies])

我知道在 useMemo 中调用钩子是不好的做法，不应该这样做。 但是，如何解决这个问题呢？

我想这样做：

const element = (item) => useSearchResult(item)
const items = useMemo(()=> {
    return items.map(item=> {
        element(item)
    })
    ...
}, [dependencies])

但我不认为这解决了不在 useMemo 中调用钩子的问题

编辑
useSearchResult 将返回一个 JSX 元素，该元素基于它接收到的 item 属性

const useSearchResult = ({item}) => {
 return (
   <div>
     {item.name}
     {item.id}
    </div>
 )
}

Answer 1

const useSearchResult = ({item}) => {
 return (
   <div>
     {item.name}
     {item.id}
    </div>
 )
}

由于此代码不调用任何钩子（例如，

useState

、

useEffect

），因此它不是自定义钩子。您可以根据需要多次调用此函数，并且可以更改每次渲染的次数。你唯一应该做的就是更改它的名称，这样就不会有人错误地认为它需要遵循钩子的规则。