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

Question

我目前正在使用此函数在 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 进行测试，所以它可以正常工作，但实际上，我想要 View 中包含的所有 item，其样式为 friends。目前，每个项目都会有一个单独的<View style={styles.friends}>。但是，我想将所有项目映射到一个 <View style={styles.friends}>

Answer 1

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，因为数组中的每个对象都是这样传递给函数的。

有关更多信息，请查看this part of the React docs。

Answer 2

如果您希望所有内容都包含在样式为朋友的视图中，那么代码应该是这样的。

您应该将视图内的地图作为 JS 代码并从 item 变量中访问属性。

const showUsers = React.useCallback(
  (data: UsersLazyQueryHookResult, numberOfUsers: Number) => {
    if (data) {
      return (
        <View style={styles.friends}>
          {
            data.users.nodes.map(item => {
              const userName = item.firstName
                .concat(' ')
                .concat(item.lastName);

                return (<View style={styles.item}>
                  <Text style={styles.userName}>{userName}</Text>
                  <View style={styles.addButtonContainer}>
                    <Button
                      rounded
                      onPress={() => {
                        addFriend(Number(item.id));
                        setIsSubmitted(false);
                        setUserData(null);
                      }}>
                      <Icon name="plus" size={moderateScale(20)} color="black" />
                    </Button>
                  </View>
                </View>);
            })

          }
        </View>
      );
    }
  },
  [createUserRelationMutation, userData, numberOfUsers],
);