RN 錯誤：文本字符串必須在<text>零件</text>

Question

我知道以前有人問過這個問題，但沒有一個答案對我有幫助。 我在包含以下內容的文件中收到此錯誤：

          <View style={styles.listHolder}>
            {data && (
              <MyList data={userData} onSendRequest={onSendRequest}></MyList>
            )}
          </View>

這里的data由 grapqhl 查詢（Apollo）返回。 錯誤出現在 MyList 組件中，如下所示：

type UserProps = {
  data: UsersLazyQueryHookResult;
  //originatorId: number;
  onSendRequest: (id: number) => void;
};
export const MyList: React.FunctionComponent<UserProps> = ({
  data,
  //originatorId,
  onSendRequest,
}) => {
  return (
    <View>
      {data && (
        <FlatList
          data={data.users.nodes}
          horizontal={false}
          scrollEnabled
          renderItem={({ item }) => (
            <User
              user={item}
              onSendRequest={onSendRequest}
            />
          )}
          keyExtractor={(item) => item.id.toString()}
          ListEmptyComponent={NoFriendsContainer}
        />
      )}
    </View>
  );
};

在這個組件中，錯誤落在返回的第一行，上面寫着<View>

我錯過了什么？ 請注意，當我使用 Prettier 進行格式化時，MyList 之前的括號會自動出現。

Answer 1

在您發布的代碼中找不到任何錯誤，但請嘗試此解決方案。

type UserProps = {
  data: UsersLazyQueryHookResult;
  //originatorId: number;
  onSendRequest: (id: number) => void;
};
export const MyList: React.FunctionComponent<UserProps> = ({
  data,
  //originatorId,
  onSendRequest,
}) => {
  return (
    <View>
      {data?(
        <FlatList
          data={data?.users?.nodes}
          horizontal={false}
          scrollEnabled
          renderItem={({ item }) => (
            <User
              user={item}
              onSendRequest={onSendRequest}
            />
          )}
          keyExtractor={(item) => item?.id?.toString()}
          ListEmptyComponent={NoFriendsContainer}
        />
      ):null}
    </View>
  );
};```