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

Question

当我的 json 数据只有一个时，我的 React-Native Flatlist 拒绝渲染数据。当我的 Json 上的数据多于一个时，我的平面列表会正确呈现。

我已经尝试了我能想到的所有 ricks，但仍然没有用。这发生在我所有程序中的所有 Flatlist 上，它已经令人作呕了。

我尝试使用 Object.keys(jsonResponse.Product).length; 获取数组端在选择渲染到 Flatlist 或 return 单个数据视图之前，它拒绝对我也有效，因为 Object.key returns 在数据项为一个时大小相同并且在它的两个。（真奇怪）

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

还尝试使用 Array.from() 来确保 flatlist 将呈现的数据很好地转换为 object/array

我也尝试过使用 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})}
                                            />
                                        )}

                                    }


                                />)

      }

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

Answer 1

它可能不是平面列表，因为它适用于一个项目...它可能是数据

一些 API 的 return 一个 json 数组用于多个数据例如：[{1...},{2...},{3...}] 并且被 faltlist 组件很好地接受。但是当只请求一个项目时，apis return 一个个体 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
}

当你有 1 件商品时，你能 post 样品 this.state.PC_list_data 吗？

Answer 2

我也遇到这个问题

解法：

有时 flatlist 无法显示单个记录，您必须在 flatlist 中添加额外的数据

<FlatList
   extraData={this.state} />

它的工作正常

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

React-Native Flatlist not rendering when record is single

react-native

react-native-flatlist