通过地图渲染而不是 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，样式为 [=15] =].目前，每个项目都会有一个单独的 <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

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

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

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],
);

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

Render via map instead of for loop

javascript

rendering

typescript

reactjs

react-native