Question

我已经看过类似的问题，并试图更改代码，但是数据仍然无法显示。我看了一些教程，并且到目前为止。这是我的代码。

 export default class HomeScreen extends React.Component {

  state = {
    dateItems: [],
    loading: false,
  }

  unsubscribe = null;

  async getAppointment() {
    const dateList = [];
    var snapshot = await firebase.firestore()
      .collection('appointment')
      .orderBy('createdAt', 'desc')
      .get()

    snapshot.docs.forEach(doc => {
      dateList.push({
        key: doc.id,
        date: doc.data().date,
        createdAt: doc.data().createdAt,
      });
      this.setState({
        dateItems: dateList,
        loading: false,
      });
    });
    console.log(dateList);
  }

  componentDidMount() {
    this.getAppointment();
  }

  render() {
    return (
      <View style={styles.container}>

        <View >
          <View style={styles.header}>
            <Text style={styles.headerTitle}>Appointments</Text>
            <Button
              onPress={() => this.props.navigation.navigate('Booking')} title="Add"
            />
          </View>
          <FlatList
            data={this.state.dateItems}
            renderItem={(item, index) => (
              <View>
                <Text style={styles.item}>{item.date}</Text>
                <Text>Created: {item.createdAt}</Text>
                <View style={styles.hr}></View>
              </View>
            )}
            keyExtractor={item => item.id}
          />
        </View>
      </View>
    );
  }
}

数据显示在控制台的数组中

Array [
  Object {
    "createdAt": t {
      "nanoseconds": 467000000,
      "seconds": 1591023433,
    },
    "date": t {
      "nanoseconds": 478000000,
      "seconds": 1592740813,
    },
    "key": "Qlaq8Nd5GYaxFYr9M6Iq",
  },
  Object {
    "createdAt": t {
      "nanoseconds": 31000000,
      "seconds": 1591020391,
    },
    "date": t {
      "nanoseconds": 859000000,
      "seconds": 1593327612,
    },
    "key": "ZsP2pBcNNgb4Nj6Jrpce",
  },
]

我需要显示日期，而不是显示date和createdAt的时间戳。我不知道该在哪里实现。

Answer 1

在Javascript中格式化日期可能会很混乱，因为您会遇到各种时区等复杂问题。

但是通常，首先需要一个新的Date对象。为此，您可以这样做：

const date = new Date(doc.data().date.seconds * 1000)

这是因为Date构造函数采用（作为一种选择）自1970年以来的毫秒数作为其参数。

但是，这只会给您一个Date对象，而console.log将返回一个很长的字符串，例如“ Mon Jun 01 2020 07:57:13 GMT-0700（Mountain Standard Time）” 。要对其进行格式化，您需要Intl.DateTimeFormat：

const dateObj = new Date(doc.data().date.seconds * 1000)
const date = new Intl.DateTimeFormat('en-US').format(dateObj) // "6/1/2020"

如果您想对日期格式进行更精细的控制，请查看this SO answer，或者使用Moment.js之类的文字来简化您的生活。

如果可以使用默认的en-US格式（或任何其他语言环境），您的代码最终将类似于以下内容。我不确定为什么要在setState语句的每个循环中调用forEach，但是假设可以保存到dateList完全构建之前，则可以使用map而是更有效：

const dateFormat = new Intl.DateTimeFormat('en-US') 
const dateList = snapshot.docs.map(doc => {
  const dateObj = new Date(doc.data().date.seconds * 1000)
  const createdAtObj = new Date(doc.data().createdAt.seconds * 1000)
  return {
    key: doc.id,
    date: dateFormat.format(dateObj),
    createdAt: dateFormat.format(createdAtObj)
  }
 });

 this.setState({
    dateItems: dateList,
    loading: false,
 })

如何在平面列表中显示Firebase中的数据？

1 个答案: