Question

我希望将一些firebase数据呈现给HomeFeed组件。我在componentDidMount方法中更新状态。你可以看到下面的内容。它是一个阵列。我应该使用map函数映射它吗？如何访问特定信息，如＆＃34; title＆＃34;，＆＃34; link＆＃34;，＆＃34; type＆＃34;等，以便能够呈现它？

非常感谢！

var React = require('react');
var Rebase = require('re-base');
var base = Rebase.createClass("https://nimbus-8ea70.firebaseio.com/");

// TODO: Render Firebase data to screen.

// Home
// <Home />
var HomeContainer = React.createClass({
    render : function() {
        return (
            <div className="homeContainer">
                <HomeFeed />
            </div>
        );
    }
});

// Home Feed
// <HomeFeed />
var HomeFeed = React.createClass({
    componentDidMount: function() {
        base.fetch('article', {
            context: this,
            asArray: true,
            then(data){
                console.log(data);
                this.setState({
                    feed: data
                })
            }
        });
    },
    getInitialState: function() {
        return {
            feed: []
        }
    }, 
    render : function() {
        return (
            <div className="homeFeed">
                {/* Use map function here? */}
            </div>
        );
    } 
});

module.exports = HomeContainer;

Answer 1

每当render发生更改时，

state都会运行（除非您使用shouldComponentUpdate修改此行为），只要您正确使用setState组件即可当状态发生变化时自动更新。

如果您具体询问如何将数组转换为render理解的内容，那么是的，map是一种非常常见的方法。它可能看起来像这样：

render : function() {
    return (
        <div className="homeFeed">
            {this.state.feed.map(function(ea){
                return <div>{ea.someProperty}</div>
            })}
        </div>
    );
}

请注意，您必须将ea.someProperty括在花括号中，因为您基本上是在更多JSX内部的JavaScript表达式中插入JSX。这种嵌套的JSX / Expression /在我害怕的React中，你需要使用JSX结构。

More about array.map

在React中渲染Firebase数据

1 个答案: