React 状态映射表现得很奇怪？答案

【问题标题】：React state mapping acting very strangely?React 状态映射表现得很奇怪？
【发布时间】：2018-01-28 05:09:27
【问题描述】：

所以，得到这个，伙计们。我从 Firebase 检索一些数据，并将其加载到我的 state，然后映射它，但我似乎无法用它做任何有用的事情。它变得更奇怪了，因为在 map 中，console.log(mappedValue) 返回我期望的值，但 <h1>{mappedValue}</h1> 没有。什么给了？

有问题的页面：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { app } from '../helpers/firebaseHelpers.js';


import '../../stylesheets/home.css';
import '../../stylesheets/forms.css';
import '../../App.css';



export class AuthQuotes extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            quotes: []
        };
    }
    componentDidMount() {
        this.getQuotes();
        this.props.changePage("quotes");
    }

    getQuotes() {
        this.firebaseRef = app.database().ref(`quotes`);
        var quotes = [];
        this.firebaseRef.on('child_added', snapshot => {
            var quote = snapshot.val();
            quote['key'] = snapshot.key;
            quotes.push(quote);
            this.setState({
                quotes: quotes,
            });
        });
    }

    renderQuote(quote) {
        return (
            <h1>hi</h1>
        )
    }

    render() {
        console.log(this.state.quotes[0])
        return (
            <div>
                {this.state.quotes.map(quote => {
                    <input type="text" placeholder={quote.person.fName} />
                    console.log(quote.person.fName)
                })}
            </div>
        );
    }
}

export default AuthQuotes

【问题讨论】：

标签： javascript reactjs firebase

【解决方案1】：

在您删除 {} 时解释为什么它可以工作：

每件事背后都有一个正当的理由，有两个ways of using arrow functions：

1- 简洁的正文：当我们这样写时：a.map(el => el*2)

2- 块体：当我们这样写时：a.map(el => { return el*2; } )

第一个，在简洁的body中，只指定一个表达式，成为显式返回值，而在block body中，必须在body中使用显式的return语句。

【讨论】：

你和@Ali都是对的，但是你比Ali更彻底，所以我会尽可能接受你的回答。
@Nickdb93 很高兴，它帮助了你:)

【解决方案2】：

你忘记在map方法内返回

this.state.quotes.map(quote => 
{
    console.log(quote.person.fName);
    return <input type="text" placeholder={quote.person.fName} />
})

当你删除括号时，返回将是隐式的

this.state.quotes.map(quote => <input type="text" placeholder={quote.person.fName} />)

【讨论】：

你说的太对了。我很尴尬，我什至发布了这个问题，当我很清楚这是内心深处的原因时。感谢您的回答。

【解决方案3】：

事实证明，这是一个无声的语法错误，没有实际的错误消息，我仍然真的不知道为什么会发生。改变这个：

{this.state.quotes.map(quote => {
    <input type="text" placeholder={quote.person.fName} />
    console.log(quote.person.fName)
})}

到这里：

{this.state.quotes.map(quote =>
    <input type="text" placeholder={quote.person.fName} />
    console.log(quote.person.fName)
)}

（即在 delta => 之后没有大括号 { 使它起作用。ES6 WTF？如果有人可以解释我的原因，为什么这会发生在好人身上，我将不胜感激。

【讨论】：

查看我的答案