reactjs - 如何在平面列表中显示来自 firebase 的数据？

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",
  },
]

我需要显示日期而不是日期和 createdAt 的时间戳。我不知道我可以在哪里实现这个。

标签： reactjsreact-native

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"

如果您想对日期格式进行更精细的控制，请查看这个 SO 答案，或者为了让您的生活更轻松，请使用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,
 })