React.memo и машинописный текст
Я работаю над собственным приложением для реагирования. В настоящее время я использую компонент Item для отображения данных в плоском списке. Но редактор выдает ошибку для второго параметра React.memo, как показано ниже.
Тип логическое | undefined'нельзя присвоить типу' boolean '.
Тип undefined нельзя присвоить типу boolean.
const Item = React.memo(
({ icon, title }: any) => {
return (
<Box
flexDirection="row"
paddingHorizontal="l"
justifyContent="space-between"
alignItems="center"
style={{ marginTop: 35 }}
>
<Box flexDirection="row" alignItems="center" flex={1}>
{icon}
<Box marginLeft="l">
<Text variant="stackHeader">{title}</Text>
<Text
fontSize={15}
fontFamily="CrimsonRegular"
style={{ color: '#575757' }}
>
Last update: 03/06/2020
</Text>
</Box>
</Box>
<TouchableOpacity onPress={() => Clipboard.setString(title as string)}>
<FontAwesome5 name="copy" size={28} color="white" />
</TouchableOpacity>
</Box>
);
},
(prev, next) => { // error here
if (prev.title === next.title) {
return true;
}
}
);
2 ответа
(prev, next) => { // error here
if (prev.title === next.title) {
return true;
}
}
Typescript ожидает, что эта функция вернет
boolean
. Но только иногда. Если условие не выполняется, оператор возврата не выполняется, в результате чего функция возвращает
undefined
. И хотя
undefined
is falsy, it is not the boolean value of
false
.
So to fix this, you need to make your function always return a boolean value on all conditional branches.
For example, you could add an else clause to your conditional that returns
false
.
(prev, next) => {
if (prev.title === next.title) {
return true;
} else {
return false;
}
}
Which should be simplified to just:
(prev, next) => {
return prev.title === next.title
}
На самом деле он ожидает, что логическое значение вернется, поэтому это может помочь
(prev, next) => {
return prev.title === next.title;
}