使用Recoil时出现useEffect警告如何处理？

Question

我已按照 Recoil 文档创建了附件，该附件可以工作，但有以下警告

警告：无法对尚未安装的组件执行 React 状态更新。这表明您的渲染函数存在副作用，稍后异步调用会尝试更新组件。将这项工作移至 useEffect 代替

我在文档中看不到有关此内容的任何信息。有人可以解释一下我需要改变什么吗？

谢谢！

选择器和组件屏幕截图

代码选择器.js…

import { gql } from "@apollo/client";
import { atom, selector } from "recoil";
import client from "../apollo-client";

export const stateQuery = selector({
  key: "siteState",
  get: async ({ get }) => {
    const response = await client.query({
      query: gql`
        {
          siteSettings {
            siteSettings {
              contactEmail
              internationalTelephone
            }
          }
        }
      `,
    });
    return {
      contactEmail: response.data.siteSettings.siteSettings.contactEmail,
      internationalTelephone:
        response.data.siteSettings.siteSettings.internationalTelephone,
    };
  },
});

代码示例Block.js…

import React, { useState, useEffect } from "react";
import { useRecoilValue } from "recoil";
import { stateQuery } from "@recoil/selector";
import tw from "twin.macro";

export default function ArticleQuoteBlock({ data: { text, name } }) {
  const { contactEmail, internationalTelephone } = useRecoilValue(stateQuery);

  return (
    <section tw="bg-white quote md:quote-md">
      <div tw="bg-pink quote-inner md:quote-inner-md">
        <h1 tw="quote-text md:quote-text-md">{contactEmail}</h1>
        <h1 tw="quote-text md:quote-text-md">{internationalTelephone}</h1>

        <h1 tw="quote-text md:quote-text-md"></h1>
        {text && (
          <p tw="quote-text md:quote-text-md indent md:indent-md">{text}</p>
        )}
        {name && <p tw="name md:name-md">{name}</p>}
      </div>
    </section>
  );
}

Answer 1

我相信，您的ExampleBlock.js会尝试在其值可用之前挂载contactEmail和internationalTelephone。您可以利用 useState 和 useEffect 挂钩来解决该问题。 useState 可用于在数据更新时触发渲染。 useEffect 可用于等待组件挂载。由于您有一个异步调用，因此您应该在 useEffect 内部定义一个异步函数，然后触发它，以便您可以等待结果并相应地更新您的状态。

最简单的 useState 用法：

const [yourState, setYourState] = useState('initialValue')

。初始值可以是任何值，即 int、string、array 等。

最简单的useEffect用法：

useEffect(()=> { some_func() },[some_arg])

。当

some_arg

为空时，

some_func()

仅触发一次。

在您的情况下，下面的代码片段可能会解决问题。

export default function ArticleQuoteBlock({ data: { text, name } }) {
    const [contactEmailInfo, setContactEmailInfo] = useState();
    const [internationalTelephoneInfo, setInternationalTelephoneInfo] = useState();
    useEffect(() => {
        async function fetchData() {
            let contactEmail;
            let internationalTelephone;
            ({ contactEmail, internationalTelephone } = await useRecoilValue(stateQuery))
            setContactEmailInfo(contactEmail);
            setInternationalTelephoneInfo(internationalTelephone);
        }
        fetchData()
    }, []);

    return (
        <section tw="bg-white quote md:quote-md">
            <div tw="bg-pink quote-inner md:quote-inner-md">
                <h1 tw="quote-text md:quote-text-md">{contactEmailInfo}</h1>
                <h1 tw="quote-text md:quote-text-md">{internationalTelephoneInfo}</h1>
                <h1 tw="quote-text md:quote-text-md"></h1>
                {text && <p tw="quote-text md:quote-text-md indent md:indent-md">{text}</p>}
                {name && <p tw="name md:name-md">{name}</p>}
            </div>
        </section>
    );
}

Answer 2

你找到解决办法了吗？我正在为同样的错误而苦苦挣扎。