Question

我是React JS的新手，并创建了一个能够展示广告系列及其细节的应用。我使用Firebase作为数据库。我设法显示了广告系列列表及其详细信息。当用户点击每个有竞争力的号码时，它会链接到此广告系列的预览页面：

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

在“预览”页面上，URL中的id是正确的，console.log（camp）（在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;

Answer 1

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

ReactJS - 返回DOM中的空元素

1 个答案: