React-Native Flatlist не рендерится, когда запись одиночная - PullRequest
0 голосов
/ 25 января 2019

Мой React-Native Flatlist отказался от данных рендеринга, когда мои данные json равны единице.Мой плоский список отображается правильно, когда данных на моем Json больше одного.

Я перепробовал все приемы, о которых только могу подумать, но пока он не работает.Это происходит со всеми плоскими списками во всей моей программе, и это уже плохо.

Я пытался получить сторону массива с помощью Object.keys(jsonResponse.Product).length;, прежде чем выбрать либо рендеринг в плоский список, либо возврат одного представления данных, в котором отказывалосьтакже работает для меня, так как Object.key возвращает тот же размер, когда элемент данных один и тот же, когда его два.(очень странно)

Я также пытался изменить стиль Flatlist, используя
height:((Dimensions.get('screen').height)) и width:((Dimensions.get('screen').width)) в реквизитах Flatlist contentContainerStyle , но он не отображается приданные одиночные

Также попытался использовать Array.from(), чтобы убедиться, что данные, отображаемые в плоском списке, хорошо конвертируются в объект / массив

Я также пытался использовать this.state.PC_list_data.map(), который все еще делаетне отображается, когда элемент данных всего один (один), как плоский список

ВЫХОД JSON, КОГДА ДАННЫХ БОЛЬШЕ, ЧЕМ ОДИН * enter image description here

ОДИН ВЫХОД JSON enter image description here

render(){

        return(<FlatList
                                    contentContainerStyle={{
                                        borderWidth: 0,
                                        width:((Dimensions.get('screen').width)),
                                        //height:((Dimensions.get('screen').height))+50,
                                        borderColor:'#00d',
                                       // marginTop:30
                                    }}

                                    data={ Array.from(this.state.PC_list_data) || []}
                                    keyExtractor={(item) =>item.Product_id}
                                    renderItem={({item,index})=>
                                    {

                                        return (<CategoryProduct_List
                                                {...item}
                                                List_index={index}
                                                HrefNav={this.navigateToSubProduct.bind(this, {...item})}
                                            />
                                        )}

                                    }


                                />)

      }

/// КОД НА CategoryProduct_List Компонент

const CategoryProduct_List = props =>
{ 
           //alert('aaa')

    return (<View style={[{
        flex: 1,
        display:'flex',

        flexDirection: "row",
        backgroundColor: 'rgb(243,243,243)',
        marginHorizontal:10,
        justifyContent:'space-between',
        alignItem:'center',
        borderLeftWidth:10,
        borderLeftColor:'#80146D',
        marginBottom:10,
        marginLeft:5+'%',
        marginTop:5,
        padding:10,
        width: 90+'%',
        height:100+'%'

    }]}>


        <View style={{
            alignItem:"left",
        }}>
            <TouchableOpacity
                activeOpacity={0.7} onPress={()=> props.HrefNav()}>
                <Text>{props.Product_name.toUpperCase()}</Text>
            </TouchableOpacity>
        </View>

        <View style={{ alignItems: "flex-end",}}>

            <TouchableOpacity
                activeOpacity={0.7}>
                <IconSet  color='#80146D' onPress={()=> props.HrefNav()}   size={25} name="arrow-forward"/>
            </TouchableOpacity>
        </View>



    </View>);

}

export default CategoryProduct_List;

Что я хочу знать, так это как я могу заставить Flatlist отображать мои отдельные записи и что я не делаю прямо здесь

Ответы [ 2 ]

0 голосов
/ 08 августа 2019

я тоже столкнулся с этой проблемой

Решение:

Некоторое время плоский список не может отображать ни одной записи, необходимо добавить дополнительные данные в плоский список

<FlatList
   extraData={this.state} />

отлично работает

0 голосов
/ 25 января 2019

Это может быть не плоский список, поскольку он работает с одним элементом ... это могут быть данные

Некоторые API возвращают массив json для нескольких данных, например: [{1...},{2...},{3...}], и это хорошо принимаетсякомпонент фальтлистов.Но при запросе только одного элемента apis возвращает отдельный json Пример: {1...}, а faltlist принимает только массив json, а не отдельный json ...

. Для этого вы можете использовать функцию валидатора, котораяпроверит, являются ли данные массивом или отдельным json, и вызовет его, прежде чем использовать его в качестве данных плоского списка.было бы полезно, если бы вы разместили ответ как из группы предметов, так и из отдельного предмета

function format(data){
var result = []
if(!Array.isArray(data)){//if is not an array
   result.push(data) // push it as the first item of an array
}else{
 result=data
}

return result
}

. Можете ли вы опубликовать образец this.state.PC_list_data, когда у вас есть 1 предмет и у вас есть несколько предметов, пожалуйста?

...