ReactJS - 返回 DOM 中的空元素

Question

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

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

在预览页面上，URL 中的 id 是正确的，控制台.log(camp((在 setState 之后(给出了包含所有数据的对象，但它不会在 DOM 中呈现列表。 请问任何人都可以帮忙吗？

Console.log(cam( from renderOptions(( 打印：

{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;

Answer 1

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