时间戳

首页 > 解决方案 > 通过地图而不是 for 循环渲染

javascript - 通过地图而不是 for 循环渲染

问题描述

我目前正在使用此函数在 graphql 查询后呈现一些元素并显示结果：

 const showUsers = React.useCallback(
    (data: UsersLazyQueryHookResult, numberOfUsers: Number) => {
      if (data) {
        for (var i = 0; i < numberOfUsers; i++) {
          const userName = data.users.nodes[i].firstName
            .concat(' ')
            .concat(data.users.nodes[i].lastName);
          return (
            <View style={styles.friends}>
              <View style={styles.item}>
                <Text style={styles.userName}>{userName}</Text>
                <View style={styles.addButtonContainer}>
                  <Button
                    rounded
                    onPress={() => {
                      addFriend(Number(data.users.nodes[i].id));
                      setIsSubmitted(false);
                      setUserData(null);
                    }}>
                    <Icon name="plus" size={moderateScale(20)} color="black" />
                  </Button>
                </View>
              </View>
            </View>
          );
        }
      }
    },
    [createUserRelationMutation, userData, numberOfUsers],
  );

我读过使用 for 循环不是一个好主意。因此，我试图切换到地图，但我无法。我不知道如何在const userName使用地图时使用变量。

目前，我只能用它进行测试，numberOfUsers = 1所以它工作正常，但实际上，我希望其中item包含的所有View内容都设置为friends. 目前，每个项目都会有一个单独<View style={styles.friends}>的项目。但是，我想将所有项目映射到一个<View style={styles.friends}>

标签： javascriptreactjstypescriptreact-nativerendering

解决方案

Map 将一个函数作为其参数，这意味着您可以在传递给 map 的函数内部的 for 循环中使用相同的代码，如下所示：

data.users.map((user) => {
          const userName = user.firstName
            .concat(' ')
            .concat(user.lastName);
          return (
            <View style={styles.friends}>
              <View style={styles.item}>
                <Text style={styles.userName}>{userName}</Text>
                <View style={styles.addButtonContainer}>
                  <Button
                    rounded
                    onPress={() => {
                      addFriend(Number(user.id));
                      setIsSubmitted(false);
                      setUserData(null);
                    }}>
                    <Icon name="plus" size={moderateScale(20)} color="black" />
                  </Button>
                </View>
              </View>
            </View>
          );
        }

只需替换 的所有实例，data.users.nodes[i]因为user这就是数组中每个对象传递给函数的方式。

有关这方面的更多信息，请查看React 文档的这一部分。

推荐阅读