React Native真的不喜欢渲染
我有一个自定义钩子，它返回一个对象数组(navMenuOptions(，还有一个函数，它可以基于字符串返回特定的navMenuPoption。
export const useNavMenuOptions = () => {
const intl = useIntl()
const profile = intl.formatMessage({ id: 'profile.navMenu.profile' })
const addresses = intl.formatMessage({ id: 'profile.navMenu.addresses' })
const myOrders = intl.formatMessage({ id: 'profile.navMenu.myOrders' })
const navMenuOptions: NavMenuOption[] = [
{
id: 0,
label: profile,
icon: BiUser,
url: '/account/profile',
},
{
id: 1,
label: addresses,
icon: BiHomeAlt,
url: '/account/address',
},
{
id: 2,
label: myOrders,
icon: BsBoxSeam,
url: '/account/my-orders',
},
]
const findSelectedOption = (url: string) => {
const selectedOption: NavMenuOption | undefined = navMenuOptions.find(
(option) => option.url === url
)
if (selectedOption?.label) {
return selectedOption?.label
}
return -1
}
return { navMenuOptions, findSelectedOption }
}
然后我尝试在组件中使用findSelectedOption()函数，并呈现它返回的字符串
export const NavMenuMobile: React.FC<NavMenuProps> = ({
navMenuOptions,
changeMenuOption,
currentOption,
findSelectedOption,
}) => {
const selectedOption = useMemo(() => {
return findSelectedOption?.(currentOption)
}, [currentOption])
console.log('selected option =>', selectedOption)
return (
<Box p={4} borderBottomWidth="2px" borderBottomColor="shading.200">
{selectedOption}
</Box>
)
}
selectedOption正在返回正确的字符串，但我有一个TS lint错误：
类型"void | undefined"不可分配给类型"ReactNode">
这里有什么解决办法？
undefined。请改用null。
const selectedOption = useMemo(() => {
return findSelectedOption?.(currentOption) ?? null
}, [currentOption])
或者：
{selectedOption ?? null}