为什么反应原生地图功能无法正常工作？答案

【问题标题】：Why react native map function is not working properly?为什么反应原生地图功能无法正常工作？
【发布时间】：2020-03-23 05:31:22
【问题描述】：

我正在尝试从 Firebase Firestore 中检索数据。来自 firestore 的数据正在登录控制台，但在我使用组件时不显示。

renderList = () => {
        const { accounts } = this.props
        accounts && accounts.map((account) => {
            return (
                <View>
                    <Text>{account.accountName}</Text>
                    {console.log(account.accountName)}
                </View>
            )
        })
    }

    render() {
        return (
            <>
                {this.renderList()}
            </>
        )
    }

在上面的编码中，console.log(account.accountName) 正在工作，但它没有在 render 方法中打印。我需要用这些数据创建一个列表。

【问题讨论】：

你试过在 View 中使用 renderList 吗？
试过了，不行
很抱歉，您在渲染列表中没有返回任何内容。您从 map 函数创建了一个 JSX，但您还必须返回它。只需将 return 关键字放在帐户 && 后面 ...
是的，伙计。你是对的
如果你想了解 ES6 语法以及 JS 数组如何运作：reactdevstation.github.io/2020/03/18/es6-for-react.html

标签： firebase react-native redux-firestore

【解决方案1】：

请试试这个：

    renderList = () => {
            const { accounts } = this.props;
     if(accounts){
            return accounts.map((account) => {
                return (
                    <View>
                        <Text>{account.accountName}</Text>
                        {console.log(account.accountName)}
                    </View>
                )
            })
}
        }

        render() {
            return (
                <>
                    {this.renderList()}
                </>
            )
        }

希望对你有帮助

【讨论】：

它工作正常。你是个天才。这两者有什么区别？
看问题是，你没有从 renderListView 返回任何东西，所以我只是添加了一个返回 statemnt。很高兴它有帮助。如果您认为它是正确的答案，也请标记为已接受:)

【解决方案2】：

我也有同样的问题，这对我有用。就在箭头 ( => ) 之后，使用括号而不是像这样的大括号 ( => (... your code ...) 不是这个 => {....}

这是您的编辑代码

renderList = () => {
        const { accounts } = this.props
        accounts && accounts.map((account) => ( // don't use curly brace! use bracket "("
            return (
                <View>
                    <Text>{account.accountName}</Text>
                    {console.log(account.accountName)}
                </View>
            )
        )) // and here also; not curly brace; but a bracket ")"
    }

    render() {
        return (
            <>
                {this.renderList()}
            </>
        )
    }

【讨论】：