展示商店的信息

Question

为了显示所有的商店，我从数据库(Firestore)中获取数据，并将它们推入数组和setState中，并使用地图显示来自this.state{ shops }的商店。

这还不错，但我想知道是否有更好的方法。

export default class Shop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shops: [],
    };
  }

  async componentDidMount() {
    const querySnapshot = await db.mShopsCollection().get();
    const shops = [];
    querySnapshot.forEach((doc) => {
      const shop = {
        id: doc.id,
        address1: doc.data().address1,
        address2: doc.data().address2,
        address3: doc.data().address3,
        name: doc.data().name,
        prefecture: doc.data().prefecture,
        zip_code: doc.data().zip_code,
      };
      shops.push(shop);
    });
    this.setState({ shops });
  }

  render() {
    const { shops } = this.state;
    return (
      <View>
        {shops.map((shop) => (
          <TouchableOpacity onPress={this.handleShowMap} key={shop.id}>
            <View>
              <View>
                <Text>{shop.name}</Text>
                <Text>
                  〒
                  {shop.zip_code}
                  {'\n'}
                  {shop.prefecture}
                  {shop.address1}
                  {shop.address2}
                  {'\n'}
                  {shop.address3}
                </Text>
            </View>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}
```

Answer 1

您可以在componentDidMount中进行一些改进。

首先，创建一个空的shops数组，然后在querySnapshot上的每次迭代中推到它。当通过转换另一个数组(或类似数组的集合)来构造数组时，使用的适当方法是Array.prototype.map。可以通过访问快照的.docs属性从快照中获取文档数组。

其次，与多次重复调用doc.data不同，您可以创建一个属性数组并从正在迭代的文档中提取每个属性，并使用Object.fromEntries将它们放入一个新的对象中：

async componentDidMount() {
  const querySnapshot = await db.mShopsCollection().get();
  const properties = ['address1', 'address2', 'address3', 'name', 'prefecture', 'zip_code'];
  const shops = querySnapshot.docs.map((doc) => {
    const data = doc.data();
    return {
      id: doc.id,
      ...Object.fromEntries(properties.map(prop => data[prop]))
    };
  });
  this.setState({ shops });
}

Lodash的pick是另一种方法，可用于从对象中提取某些属性到新对象中。