创建 FlatList 项。但它不适用于本机反应答案

【问题标题】：create FlatList item. but it doesn't work on react native创建 FlatList 项。但它不适用于本机反应
【发布时间】：2020-07-18 15:48:06
【问题描述】：

为什么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)

【问题讨论】：

欢迎来到 Stack Overflow。请阅读How to Ask。具体来说，“不工作”是什么意思？

标签： javascript reactjs react-native react-redux react-native-flatlist

【解决方案1】：

你使用渲染项的方式不对。

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

渲染项目获取许多参数，要获取项目，您必须使用 {item} 来访问当前项目。

另外，你没有从你的函数返回任何东西来渲染，上面的代码解决了你遇到的问题。

【讨论】：

我能告诉我如何使用 forEach 函数显示这些数据
首选方式是使用地图功能，每个使用的具体原因有哪些？

【解决方案2】：

你需要返回你想要在 JSX 上显示的内容

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

【讨论】：