React.js/Rect-Native如果条件错误，如何跳过Map()迭代

Question

我在React Native中有这个简单的组件，我的目标是跳过迭代，如果给定的参数gradeIsMandary为false，它应该只迭代保修和价格，如何在不影响性能的情况下实现此结果？我会接受任何建议，谢谢

import React, { useCallback } from 'react';
import { View, Text, SafeAreaView, SectionList, StyleSheet, Image, TouchableOpacity, Alert} from 'react-native';


export const ModalHeader: React.FC<{}> = () => {
const gradeIsMandatory = false

//code I tried to use
useEffect(()=>{
if(!gradeIsMandatory){
let appendGrade =  { key: 'grade', title: 'Grade' }
modalTabs.push(appendGrade)
}
},[])
return (
<View>
<View>
<View>
{modalTabs.map((tab, i) => (
<TouchableOpacity>
<Text>{tab.title}</Text>
</TouchableOpacity>
))}
</View>
</View>
</View>
);
}
const modalTabs = [
{ key: 'warranty', title: 'Your Waranty' },
{ key: 'price', title: 'Your price' }
]

Answer 1

尝试一个条件附加。

const extendedTabs = [...modalTabs, ...(gradeIsMandatory ? [{ key: 'grade', title: 'Grade' }] : [] )];

Answer 2

我会删除useEffect并渲染它：

return (
<View>
<View>
<View>
{modalTabs.map((tab, i) => (
<TouchableOpacity>
<Text>{tab.title}</Text>
</TouchableOpacity>
))}
{
gradeIsMandatory && <TouchableOpacity><Text>Grade</Text></TouchableOpacity>
}
</View>
</View>
</View>
);

Answer 3

您不能跳过映射迭代。但是，如果您的地图条件不满足，您可以只返回<Fragment />。

Answer 4

此useEffect将在组件的第一次渲染后运行一次，在那里操作modalTabs将不会有任何作用，因为modalTab不是此组件的State。正确的方法是：

import { useState, useEffect } from "react";
const modalTabsInitialValue = [
{ key: "warranty", title: "Your Waranty" },
{ key: "price", title: "Your price" }
];
export default (props) => {
const [modalTabs, setModalTabs] = useState(modalTabsInitialValue);
useEffect(() => {
if (props.gradeIsMandatory) {
setModalTabs((prevModalTabs) => {
const appendGrade = { key: "grade", title: "Grade" };
return [...prevModalTabs, appendGrade];
});
}
}, [props.gradeIsMandatory, setModalTabs]);
return {
...
}
};

1. 将gradeIsMandatory作为属性发送到此组件
2. 将modalTabs定义为状态
3. 使用具有props.gradeIsMandatory的useEffect挂钩作为依赖项
4. 在useEffect中基于gradeIsMandary的值创建一个新数组并更改modalTabs状态，强制组件重新渲染

更新：这不是这个问题的最佳解决方案，正如窗台所说，正确的答案是一个简单的常量：answer