使用反冲时如何处理useEffect警告

Question

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

警告：无法对尚未安装的组件执行React状态更新。这表示您的渲染函数中有一个副作用，稍后异步调用会尝试更新组件。将此工作移动到使用效果

我在文档中看不到任何关于这方面的信息。有人能解释一下我需要换什么吗？

谢谢！

选择器和组件屏幕截图

代码选择器.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,
};
},
});

代码示例块.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中定义一个异步函数，然后触发它，这样您就可以等待结果并相应地更新状态。

最简单的用途状态用法：

CCD_ 1。初始值可以是任何值，例如int、字符串、数组等。

最简单的用途效果用途：

CCD_ 2。当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>
);
}