Question

我是新来的反应者，我正在四处寻找基本概念的工作原理。我正在尝试使用Firebase服务器中的数据在列表中呈现，deta可以正常获取，但是我无法在listitem组件中呈现它。

父项：

class App extends Component {
  state = {
    data: null as null | Data[]
  }
  componentDidMount() {
    this.getData();
  }

  private getData(): void {
    let _data = new Array < Data > ()
    const db = firebase.firestore();
    db.collection('data').get()
      .then(snapshot => {
        snapshot.docs.forEach(doc => {
          let data: Data = {
            id: doc.id,
            name: doc.data().name,
            description: doc.data().description,
            country: doc.data().country,
            town: doc.data().town,
            lat: doc.data().lat,
            long: doc.data().long,
            created: doc.data().created,
            updated: doc.data().updated,
            img: doc.data().img
          }
          _data.push(data)
        })
      })
    this.setState({
      data: _data
    })
  }



  render() {
    let list = null;
    if (this.state.data) {
      list = ( 
      <div > {
          this.state.data.map(d => {
            return <ListObject name = {d.name} />
          })
        } </div>
      )
    }
    return ( 
      <div>
        <p> List </p>
        {list}
      </div>
    )
  }
}

export default App;

子组件：

import React from 'react'
import './ListObject.css';

const listObject = (props: any) => {
    return (
        <div className="ListObject">
            <p>i Am {props.name}</p>
        </div>
    )
};

export default listObject;

我在这里做错了什么？ ListObject组件在迭代之外工作。

Answer 1

这是因为db.collection('data').get()异步运行，因此在代码中未设置状态：

let _data = [];
db.collection('data').get().then(function() {
   _data.append();
});
this.setState({
    data: _data
})

_data中没有数据。

因此，您可以使用同步循环for ... of来消除此问题，并使代码更易于阅读，如下所示：

private getData(): void {
    const db = firebase.firestore();
    db.collection('data').get()
      .then(snapshot => {
         let _data = new Array < Data > ()
         for (let doc of snapshot.docs) {
            let data: Data = {
                id: doc.id,
                name: doc.data().name,
                description: doc.data().description,
                country: doc.data().country,
                town: doc.data().town,
                lat: doc.data().lat,
                long: doc.data().long,
                created: doc.data().created,
                updated: doc.data().updated,
                img: doc.data().img
            }
            _data.push(data);
         }
         this.setState({
             data: _data
         });
      })
  }

和您的渲染：



render() {
    let list = (this.state.data || []).map(d => {
        return <ListObject name = {d.name} />
    });

    return ( 
        <div>
            <p> List </p>
            <div>{list}</div>
        </div>
    )
}

Answer 2

因为dogparks为空。

此外，您还应该在渲染方法之外创建list。

类似：

let list = (this.state.data || []).map(d => {
    return <ListObject name = {d.name} />
});

render() {
    return ( 
      <div>
        <p> List </p>
        <div>{list}</div>
      </div>
    )
  }

为什么列表不呈现？

2 个答案: