我希望条件只遍历映射函数而不是渲染部分

Question

    const generateTable = () => {
    let table = [];
    // Outer loop to create parent

    const rowValue = fetchedRowData;
    const columnsValue = fetchedColumnData;

    for (let i = 0; i < columnsValue; i++) {
      let children = [];
      //Inner loop to create children
      for (let j = 0; j < rowValue; j++) {

        children.push(
            
            products.map((item, index, k) =>{
                if (i+1 == item.placementColumn.value && j+1 == item.placementRow.value) { 
                    return(
                    <TouchableOpacity style={{width: 50, height: 50, marginBottom:10, marginLeft:5, backgroundColor: 'red', alignItems: "center", justifyContent: 'center'}} onPress={() => navigation.navigate('Internet', { paramKey: telephone, })}>
                        <Text style={styles.buttonText}>row: {j+1}</Text>
                        <Text style={styles.buttonText}>column: {i+1}</Text>
                    </TouchableOpacity>     )
                }
                else {
                    return(
                    <TouchableOpacity style={{width: 50, height: 50, marginBottom:10, marginLeft:5, backgroundColor: vmColor, alignItems: "center", justifyContent: 'center'}} onPress={() => navigation.navigate('Internet', { paramKey: telephone, })}>
                        <Text style={styles.buttonText}>row: {j+1}</Text>
                        <Text style={styles.buttonText}>column: {i+1}</Text>
                    </TouchableOpacity> )
                }
            })
            
            
        );
      }
      table.push(
        <View key={i}>
          <>{children}</>
        </View>
      );
    }
    return table;
};

以下是理解我的问题的关键点：

• 我在上面的函数中生成了一个表，它从数据库中取出行和列，为每个用户生成一个表。
• 我想设置一个条件，如果行和列的值与我​​想要的值匹配，则框的颜色会发生变化。
• 请注意，我想要的值也在一个需要迭代的数组中，以便将每个值与列和行值进行比较（如您在上面的函数中所见）
• 上述函数会更改颜色，但它还会将行循环（其中正在映射的数组）迭代产品数组中的实体的次数。
• 我只想通过循环迭代条件，以便比较数组中的每个值而不是要多次渲染的 jsx 元素
• 我们将不胜感激任何建议和解决方案。
• 在此先感谢 :)

Answer 1

如果唯一的区别是一些样式，您有两种选择：

1. Conditional (ternary) operator

const generateTable = () => {
    let table = [];
    // Outer loop to create parent

    const rowValue = fetchedRowData;
    const columnsValue = fetchedColumnData;

    for (let i = 0; i < columnsValue; i++) {
        let children = [];
        //Inner loop to create children
        for (let j = 0; j < rowValue; j++) {
            children.push(
                products.map((item, index, k) => {
                    return (
                        <TouchableOpacity
                            style={{ width: 50, height: 50, marginBottom: 10, marginLeft: 5, backgroundColor: i + 1 == item.placementColumn.value && j + 1 == item.placementRow.value ? 'red' : vmColor, alignItems: "center", justifyContent: 'center' }}
                            onPress={() => navigation.navigate('Internet', { paramKey: telephone })}
                        >
                            <Text style={ styles.buttonText }> row: { j + 1 } </Text>
                            <Text style = { styles.buttonText } > column: { i + 1 } </Text>
                        </TouchableOpacity>
                    )
                })
            );
        }

        table.push(
            <View key={i}>
                { children }
            </View>
        );
    }
    return table;
};

1. 添加多种样式

const generateTable = () => {
    let table = [];
    // Outer loop to create parent

    const rowValue = fetchedRowData;
    const columnsValue = fetchedColumnData;
    let extraStyles;

    for (let i = 0; i < columnsValue; i++) {
        let children = [];
        //Inner loop to create children
        for (let j = 0; j < rowValue; j++) {
            children.push(
                products.map((item, index, k) => {
                    if (i + 1 == item.placementColumn.value && j + 1 == item.placementRow.value) {
                        extraStyles = { backgroundColor: 'red' };
                    } else {
                        extraStyles = { backgroundColor: vmColor };
                    }

                    return (
                        <TouchableOpacity
                            style={[{ width: 50, height: 50, marginBottom: 10, marginLeft: 5, alignItems: "center", justifyContent: 'center' }, extraStyles]}
                            onPress={() => navigation.navigate('Internet', { paramKey: telephone })}
                        >
                            <Text style={ styles.buttonText }> row: { j + 1 } </Text>
                            <Text style = { styles.buttonText } > column: { i + 1 } </Text>
                        </TouchableOpacity>
                    )
                })
            );
        }

        table.push(
            <View key={i}>
                { children }
            </View>
        );
    }
    return table;
};