Question

所以，得到这个，伙计们。我从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

Answer 1

你忘记返回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} />)

Answer 2

解除删除{}：

时的工作原理

一切背后都有正当理由，有两个 ways of using arrow functions ：

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

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

对于第一个，在简洁的主体中，只指定了一个表达式，它成为显式返回值，而在块体中，必须在body中使用显式的return语句。

Answer 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？如果有人能够解释我的原因，为什么这会让人感觉良好，我将不胜感激。

反应状态映射行为非常奇怪？

3 个答案: