时间戳

首页 > 解决方案 > TypeError：试图分配给只读属性。在 Expo / GraphQL Apollo 客户端上

react-native - TypeError：试图分配给只读属性。在 Expo / GraphQL Apollo 客户端上

问题描述

我遇到了 TypeError: Attempted to assign to readonly 属性。这是在带有 Apollo 客户端的 Expo / React Native 上。

我有以下 GraphQL 查询

const GET_VIDEOS = gql`
    {
      users(limit: 3) {
        userVideos {
          muxPlaybackId
          videoQuestion {
            questionText
          }
        }
      }
    }
    `;

我创建了以下组件：

export const VideoData = (ref) => {
    const { data, error, loading } = useQuery(GET_VIDEOS); 

    if (loading) return null;
    if (error) return `Error!: ${error}`;

    console.log(data);

    return (<Video
            ref={ref}
            source={{ uri: data.users[0].userVideos[0].muxPlaybackId}}
            rate={1.0}
            volume={1.0}
            isMuted={false}
            resizeMode="cover"
            usePoster={true}
            shouldPlay
            isLooping
            style={{ width: '100%', height: '100%'}}
        >
        </Video>
    );
}

似乎问题来自以下行：

source={{ uri: data.users[0].userVideos[0].muxPlaybackId}}

但是我还能如何访问这个 muxPlaybackId 字符串？这是我需要的视频源的唯一值。

为了完整起见，这是我的 GraphQL 结果：

{
  "data": {
    "users": [
      {
        "userVideos": [
          {
            "muxPlaybackId": "e6ZNh139bm2Poz5xoPl4V4016fnRCPWcZbkrTxg3Ocys",
            "videoQuestion": {
              "questionText": "What do you miss most about normal life?"
            }
          },
          {
            "muxPlaybackId": "DeygMKplfbg4Ye6PtCiFDgMFI01AEBp1tnfoVD9k401Ws",
            "videoQuestion": {
              "questionText": "What is your favorite color?"
            }
          }
        ]
      },
      {
        "userVideos": []
      },
      {
        "userVideos": []
      }
    ]
  }

标签： react-nativegraphqlexpoapollomux

解决方案

我认为这个问题与您访问muxPlaybackId. 运行时似乎在抱怨分配某些东西，而不是访问.

但是，可以肯定的是，不要使用表达式来访问 ，而是muxPlaybackId尝试对其进行硬编码，看看是否有同样的问题：

source={{ uri: "e6ZNh139bm2Poz5xoPl4V4016fnRCPWcZbkrTxg3Ocys" }}

如果这仍然产生错误，那么我会查看Video组件并查看允许设置哪些属性。

推荐阅读