Question

我想在FlatList中实现条件渲染，因此我使用了以下逻辑。这是FlatList的代码。

<View style={styles.container}>
            <FlatList
                data={Object.keys(props.results)}
                numColumns={3}
                extraData={Object.keys(props.results)}
                keyExtractor={(item, index) => 'key' + index}
                renderItem={({item}) => {
                   **return renderMessage(item, props)**
                }}/>
        </View>

这是条件的代码：

 const renderMessage = (item, props) => {
        if (props.results[item].opted) {
            console.log("inside if")
            return (
                <TouchableOpacity>
                    <ResultsDetail results={props.results[item]}
                                   setResults={props.setResults}
                                   setUserInterestResults={props.setUserInterestResults}> </ResultsDetail>
                </TouchableOpacity>
            );
        }
    }

我在gridview中得到结果，但是它没有排序。我认为它会根据索引进行排序或显示。请按以下步骤查找。

我该如何顺序排列？你们能帮我这个忙吗？

Answer 1

尝试一下

<View style={styles.container}>
    <FlatList
        data={Object.keys(props.results).filter((item => item.opted === true ? return item))}
        numColumns={3}
        extraData={Object.keys(props.results).filter((item => item.opted === true ? return item))}
        keyExtractor={(item, index) => 'key' + index}
        renderItem={({ item }) => renderMessage(item, props)} />
</View>


const renderMessage = (item, props) => {
    return (
        <TouchableOpacity>
            <ResultsDetail results={props.results[item]}
                setResults={props.setResults}
                setUserInterestResults={props.setUserInterestResults}> </ResultsDetail>
        </TouchableOpacity>
    );
}

Answer 2

我可以使用过滤器按顺序安排它。我在下面发布了最新答案。

<View style={styles.container}>
                <FlatList
                    **data={Object.keys(props.results).filter((value) =>{
                        return props.results[value].opted === true;
                    })}**
                    numColumns={3}
                    keyExtractor={(item, index) => 'key' + index}
                    renderItem={({item}) => {
                        return renderMessage(item, props)
                    }}/>
            </View>


const renderMessage = (item, props) => {

    return (
        <TouchableOpacity>
            <ResultsDetail results={props.results[item]}
                           setResults={props.setResults}
                           setUserInterestResults={props.setUserInterestResults}> </ResultsDetail>
        </TouchableOpacity>
    );

}

为什么FlatList中的条件渲染显示无序结果

2 个答案: