Странные вещи с useState, useEffect и fetch - PullRequest
Новая
       123

Странные вещи с useState, useEffect и fetch

0 голосов
/ 13 июля 2020

Я пытаюсь получить некоторые данные внутри useEffect, и когда данные получены, я хочу установить определенное состояние с помощью useState. Данные корректно возвращаются с сервера. Однако это не работает. Вот код: 

const [sharingLink, setSharingLink] = React.useState(null);

React.useEffect(() => {
    client.query({
        query: queryGetReferalData
    }).then(result => {
        console.warn(result); // correct response
        setSharingLink(result.data.referralsystem.shareUrl);
        console.warn(sharingLink); // null
    });
}, []);

Вот весь компонент: 

import React from 'react';
import styled from 'styled-components';
import { i18n } from 'Helpers';

import { Button } from './Button';
import { ButtonLink } from './ButtonLink';
import { Heading } from './Heading';
import { Input } from './Input';

import Copy from './icons/Copy';
import Facebook from './icons/Facebook';
import Twitter from './icons/Twitter';
import WhatsApp from './icons/WhatsApp';

import client from '@client/apollo';
import queryGetReferalData from './schemas/queryGetReferalData.graphql';

const Root = styled.div`
    padding: 48px;
    padding-top: 32px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    box-shadow: 0px 10px 30px rgba(27, 50, 85, 0.1);
    border-radius: 4px;

    background-color: #FFFFFF;
`;

const Pane = styled.div`

`;

const Row = styled.div`
    display: flex;

    & > * + * {
        margin-left: 10px;
    }
`;

export const Form = () => {
    const [sharingLink, setSharingLink] = React.useState(null);

    const facebookSharingLink =
        sharingLink && `https://www.facebook.com/sharer/sharer.php?${encodeURIComponent(sharingLink)}`;

    const twitterSharingLink = 
        sharingLink && `http://www.twitter.com/share?url=${encodeURIComponent(sharingLink)}`;

    const whatsAppSharingLink = 
        sharingLink && `whatsapp://send?text=${encodeURIComponent(sharingLink)}`;

    React.useEffect(() => {
        client.query({
            query: queryGetReferalData
        }).then(result => {
            console.warn(result);
            setSharingLink(result.data.referralsystem.shareUrl);
            console.warn(sharingLink);
        });
    }, []);

    return (
        <Root>
            <Pane>
                <Heading>
                    { i18n._('Your invitational link') }
                </Heading>
                <Row>
                    <Input disabled={sharingLink === null} value={sharingLink} />
                    <Button icon={<Copy />}>
                        { i18n._('COPY') }
                    </Button>
                </Row>
            </Pane>
            <Pane>
                <Heading>
                    { i18n._('Or share via social') }
                </Heading>
                <Row>
                    <ButtonLink
                        backgroundColor='#5A79B5'
                        icon={<Facebook />}
                        href={facebookSharingLink}
                    >
                        { i18n._('Facebook') }
                    </ButtonLink>
                    <ButtonLink
                        backgroundColor='#52A6DB'
                        icon={<Twitter />}
                        href={twitterSharingLink}
                    >
                        { i18n._('Twitter') }
                    </ButtonLink>
                    <ButtonLink
                        backgroundColor='#0DC455'
                        icon={<WhatsApp />}
                        href={whatsAppSharingLink}
                    >
                        { i18n._('WhatsApp') }
                    </ButtonLink>
                </Row>
            </Pane>
        </Root>
    );
};

Компонент также отображает как sharingLink is null.

  1. Почему это происходит?
  2. Что мне делать, чтобы эта работа?

1 Ответ

0 голосов
/ 13 июля 2020

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

Добавление в DOM в компоненте, не имеет значения, используется он или нет, как-то портит хуки, даже если вы добавляете HTML к чему-то совершенно не имеющему отношения к реакции Я думаю.

У меня была такая структура: 

<body>
 <div id="page">
  <div id="root">
   <CustomReactElement />
  </div>
 </div>
<body>

Код внутри CustomReactElement добавлял разметку на «страницу». Я изменил код с установки внутреннего HTML на appendChild (), и все заработало.

...