Почему условный рендеринг в FlatList показывает неупорядоченный результат - PullRequest
Новая
       28

Почему условный рендеринг в FlatList показывает неупорядоченный результат

0 голосов
/ 29 апреля 2020

Я хотел реализовать условный рендеринг в FlatList, поэтому я использовал приведенную ниже логику c. Это код для 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>
            );
        }
    }

Я получаю результаты в виде таблицы, но они не упорядочены. Я думаю, что это сортируется или отображается на основе индекса. Пожалуйста, найдите, как показано ниже.

output

Как мне оформить заказ? Ребята, не могли бы вы помочь мне с этим?

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

Попробуйте это 

<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>
    );
}
0 голосов
/ 29 апреля 2020

Мне удалось оформить заказ, используя фильтр. Обновленный ответ я разместил ниже. 

<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>
    );

}
...