RN 错误：文本字符串必须在 <Text> 组件中呈现答案

【问题标题】：RN Error: Text strings must be rendered within a <Text> componentRN 错误：文本字符串必须在 <Text> 组件中呈现
【发布时间】：2020-10-25 20:05:14
【问题描述】：

我知道以前有人问过这个问题，但没有一个答案对我有帮助。我在包含以下内容的文件中收到此错误：

          <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 之前的括号会自动出现。

【问题讨论】：

可能在User 组件中。
用户文件未显示在错误列表屏幕中。我仍然将它添加到 qs @Pain
但这就是<Text> 组件所在的位置，不是吗？但是，我们看不到 user 中的内容，并且在您处理完 userName 之后，我们也无法知道它是什么。不相关，但我不明白为什么所有 concat 而不是 `${user.firstName} ${user.lastName}` 并且我个人会将这个逻辑移出主线渲染。如果没有别的，您可以将其默认为 ''（空字符串）并查看是否有帮助，否则您需要包含更多信息。
我认为问题在{data && (... 试试{( data !== undefined ) && (...
@Pain 这似乎不太可能，因为与 data !== undefined 相比，data 被评估为虚假的可能性更多。

标签： javascript reactjs typescript react-native render

【解决方案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>
  );
};```

【讨论】：

data={data?.users?.nodes} 一起工作。上面的data?( 不是必需的
你能解释一下它的真正含义吗？只有用户存在时才会填充数据？
称为可选链操作符，2020年引入，更多内容可以看这篇文章：kashanhaider.com/javascript-optional-chaining-operator