ReactJS - 在 DOM 中返回空元素答案

【问题标题】：ReactJS - returns empty elements in DOMReactJS - 在 DOM 中返回空元素
【发布时间】：2018-03-14 23:26:48
【问题描述】：

我是 React JS 的新手，我正在创建一个显示活动及其详细信息的应用程序。我使用 Firebase 作为数据库。我设法显示了活动列表及其详细信息。当用户点击每个营销号时，它会链接到此活动的预览页面：

<th><Link to={"/Preview/"+cam.id} key={cam.id}>{cam.cnumber}</Link></th>

在预览页面上，URL 中的 id 是正确的，并且 console.log(camp)(After setState) 为对象提供了所有数据，但它不会在 DOM 中呈现列表。有人可以帮忙解决这个问题吗？

来自 renderOptions() 的 Console.log(cam) 打印：

{id: "L0000000", cnumber: undefined, adnumber: undefined, weekno: undefined, title: undefined, …}

这是我的代码：

import React, { Component } from 'react';
import firebase from './firebase';
import banner from './banner.jpg';
import Header from './Header';
import { key } from "firebase-key";

class Preview extends Component {
    constructor(props) {
        super(props);
        this.state = {
            camp:[],
        };
        this.renderOptions = this.renderOptions.bind(this);
    }

    componentDidMount() {
        const projectId = this.props.params.key;
        var  itemsRef= firebase.database().ref('campaigns/'+ projectId);
        itemsRef.on('value', (snapshot) => {
            let camp = snapshot.val();
            let newState = [];

            newState.push({
                id:projectId,
                cnumber: projectId.cnumber,
                adnumber:projectId.adnumber,
                weekno:projectId.weekno,
                title:projectId.title,
                brand:projectId.brand,
                advertiser:projectId.advertiser
            });

            this.setState({
                camp:newState
            });
        console.log(camp);
        });
    }

    renderOptions(e) {
        return this.state.camp.map((cam) => {
            console.log(cam);
            return(
                <ul key={cam.id}>
                <li>{cam.cnumber}</li>
                <li>{cam.weekno}</li>
                <li>{cam.adnumber}</li>
                <li>{cam.title}</li>
                <li>{cam.brand}</li>
                <li>{cam.advertiser}</li>
                </ul>
            );
        });
    }
    render(){
        return (
            <div>
            <Header />
                {this.renderOptions()}
            </div>
        );
    }
}

export default Preview;

【问题讨论】：

标签： reactjs firebase

【解决方案1】：

当您在itemsRef.on('value', ...) 处执行newState.push 时，您似乎正在使用projectId 对象来填写信息。您不应该使用从snapshot 解析的camp 对象吗？

【讨论】：

非常感谢 Kujira。是的，这已经解决了问题:)