React JSX: переменная не задана, запрос не содержит изображения - PullRequest
Новая
       51

React JSX: переменная не задана, запрос не содержит изображения

0 голосов
/ 03 августа 2020

Я новичок в реакции, и у меня проблема, когда я пытаюсь установить переменную, но она остается пустой.

Итак, у меня есть эта плитка, на которой отображается аватар пользователя. Когда файл выбран (вводится), это должно привести к установке «аватара» через setAvatar. Затем, когда нажимается кнопка «Сохранить новый аватар», он должен вызвать setAvatarUpdate, который, в свою очередь, вызывает useAvatarUpdate, вставляя в параметры аватар (изображение), который был установлен ранее. 

import React from "react";

import { useAvatarUpdate, useUserDetails } from "@sdk/react";
import { makeStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import { Tile } from "@components/atoms";
import * as S from "./styles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    '& > *': {
      margin: theme.spacing(1),
    },
  },
  small: {
    width: theme.spacing(3),
    height: theme.spacing(3),
  },
  large: {
    width: theme.spacing(17),
    height: theme.spacing(17),
  },
}));


export const AccountTile: React.FC = () => {
  const { data: user } = useUserDetails();
  const classes = useStyles();

  const [avatar, setAvatar] = React.useState(null);
  const [setAvatarUpdate, { data, error }] = useAvatarUpdate({image: avatar});
  
  return (
    <S.TileWrapper>
      <Tile>
        <S.Wrapper>
          <S.Header>MY DATA</S.Header>
          <S.Content>
            <S.HeaderSmall>
              Avatar
            </S.HeaderSmall>
            
            <Avatar alt="Avatar" className={classes.large} src={(user && user.avatar && user.avatar.url) || ""} />
            <br/><br/>
            <label>
              <input type="file" onChange={event => setAvatar(event.target.files[0])}/>
            </label>
            <br/><br/>
            <button onClick={() => {setAvatarUpdate()}} >Save new avatar</button>
          </S.Content>
        </S.Wrapper>
      </Tile>
    </S.TileWrapper>
  );
};

Затем, в свою очередь, useAvatarUpdate приводит к мутации graphQL 

export const avatarUpdate = gql`
  mutation AvatarUpdate($image: Upload!) {
    avatarUpdate(image: $image) {
      user {
        id
        avatar {
          url
        }
      }
    }
  }
`;

Однако я предполагаю, что настройка const 'avatar' не выполнена должным образом, потому что, когда я выбираю изображение через свой файловый браузер, затем нажимаю кнопку «Сохранить новый аватар»

Я вижу, что запрос, сделанный в моем браузере, не содержит изображения, изображение: пусто. 

[
  {
    "operationName": "AvatarUpdate",
    "variables": { "image": {} },
    "query": "mutation AvatarUpdate($image: Upload!) {\n  avatarUpdate(image: $image) {\n    user {\n      id\n      avatar {\n        url\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}\n"
  }
]

Есть ли у кого-нибудь представление о том, что здесь происходит и что я делаю не так. Полагаю, это просто настройка константного аватара?

...