Question

当我的json数据仅为一个时，我的React-Native Flatlist拒绝了渲染数据。当我的Json上的数据不止一个时，我的平面列表会正确呈现。

我尝试了所有我能想到的技巧，但是，它没有用。我所有程序中的所有Flatlist都在发生这种情况，并且已经令人生厌。

我尝试使用Object.keys(jsonResponse.Product).length;获取数组在选择渲染到Flatlist或返回单个数据视图之前，该视图拒绝为我工作，因为Object.key在数据项为一个时返回相同的大小，而在数据项为两个时返回相同的大小。（真的很奇怪）

我也尝试过使用我的Flatlist样式
height:((Dimensions.get('screen').height))和width:((Dimensions.get('screen').width)) 在Flatlist contentContainerStyle 道具中，但是当数据为单个时不会呈现

还尝试使用Array.from()以确保平面列表将呈现的数据已正确转换为对象/数组

我还尝试过使用this.state.PC_list_data.map()，当数据项仅是一个（单个）如扁平化列表时，它仍然无法呈现

数据多于一个时的JSON输出

JSON单输出

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})}
                                            />
                                        )}

                                    }


                                />)

      }

/// 组件上的代码

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呈现我的单条记录以及我在这里没有做的事情

Answer 1

它可能不是平面列表，因为它只能处理一项...可能是数据

某些API为多个数据Ex：[{1...},{2...},{3...}]返回json数组，并且faltlist组件很好地接收了该数组。但是，当仅请求一项时，api将返回一个单独的json Ex：{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
}

当您有1个项目时，如果您有多个项目，您可以张贴this.state.PC_list_data的示例吗？

Answer 2

我也面临这个问题

解决方案：

某些时候，平板列表无法显示为一条记录，您必须在平板列表中添加额外的数据

<FlatList
   extraData={this.state} />

工作正常

当记录为单个时，React-Native Flatlist无法呈现

2 个答案: