useState、useEffect 和 fetch 的奇怪内容

Question

我试图在 useEffect 中获取一些数据，当收到数据时，我想用 useState 设置一个特定的状态。来自服务器的数据正确 returns。然而，这是行不通的。这是代码：

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 为空。

为什么会这样？
我该怎么做才能完成这项工作？

Answer 1

我有一些代码被添加到父组件中的 DOM。当我删除它时，一切正常。

添加到组件中的 DOM，无论它是否进入 useEffect 都无关紧要，即使你将 HTML 添加到与反应完全无关的东西，我猜也会以某种方式弄乱钩子。

我有这个结构：

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

CustomReactElement 中的代码正在向 'page' 添加标记。我将代码从设置 innerHTML 更改为 appendChild() 并且一切正常。

useState、useEffect 和 fetch 的奇怪内容

Strange stuff with useState, useEffect and fetch

reactjs

react-hooks

use-effect

use-state