创建 FlatList 项目。但它不适用于 React Native

Question

为什么 FlatList 不起作用？

我正在尝试从我的 API 获取数据并通过 FlatList 查看，但它不起作用。我可以在控制台中看到这些值，但在 FlatList.

中看不到

**Home Page** 
   import React, { Component } from 'react'
import {Text,TouchableOpacity,View,FlatList} from 'react-native'
import { connect } from 'react-redux'
//import {VIEWDATA } from '../../src/action/type';
//import ViewData from '../../src/action/index'
import dataFetch from '../../src/action/index'
class AllData extends Component{
    constructor(){
        super()
        this.state={
            values: [],
            b: [{id:1 ,name:'Turag'},{id:2,name:'Shagor'}],
            c:'av'
        }
    }
    static getDerivedStateFromProps(props, state) {
     return{
          values : props.val
     }
    }
    componentDidMount() {
         this.props.abc    
        //this.setState({values: this.props.val})
    }
    shouldComponentUpdate() {
        return true;
      }
    render(){
        return(
            <View>
            <Text>View All Datas</Text>

            <FlatList
                data={this.state.b}
                renderItem={(i)=>{
                    <View>  <Text>{i.name}</Text> </View>
                   {console.log(i.name)}
                }}
                   keyExtractor={(item) => item.id}
            />         
                <TouchableOpacity 
                onPress={this.props.abc}
                >
                <Text>Submit</Text>
                </TouchableOpacity>

            </View>
        )
    }
}
const mapStateToProps = (state)=>{
    return{
        val: state.arrayData
    }
}
const mapDispatchToProps = dispatch =>{
    return ({
        abc: () => {dispatch(dataFetch())}
    })
}
export default connect(mapStateToProps,mapDispatchToProps)(AllData)

Answer 1

你使用render item的方式不对。

   renderItem={({item})=>{
           {console.log(item.name)}
            return (<View><Text>{item.name}</Text></View>)
    }}

渲染项目有很多参数，要获得项目，您必须使用 {item} 才能访问当前项目。

此外，您没有从函数返回任何内容进行渲染，上面的代码解决了您遇到的问题。

Answer 2

您需要return您想要在 JSX 上显示的内容

renderItem={(i)=>{
               return ( 
                     <View>  
                          <Text>{i.name}</Text> 
                     </View>
                     );
            }}

创建 FlatList 项目。但它不适用于 React Native

create FlatList item. but it doesn't work on react native

javascript

reactjs

react-native

react-redux

react-native-flatlist