如何在另一个副作用渲染反应组件后执行副作用

Question

我有以下简单的用例：组件ServerRendered用于呈现使用属性url从服务器检索到的标记。在ServerRendered中，我使用useEffect从后端加载标记，将状态设置为当前标记，并在div中呈现它。属性init可选地指定在呈现标记之后应该执行的函数。在呈现标记之后，我将如何运行init函数？

/* eslint-disable react/no-danger */
import React, {useState, useEffect} from 'react';
import axios from 'axios';
type ServerRenderedPropsType = {
url: string,
init?: () => void,
};
function ServerRendered(props: ServerRenderedPropsType) {
const [html, setHtml] = useState('');
useEffect(() => {
async function fetchData() {
const result = await axios(props.url);
setHtml(result.data.title);
}
fetchData();
}, [props.url]);
return <div dangerouslySetInnerHTML={{__html: html}} className="serverRendered" />;
}
export default ServerRendered;

Answer 1

当你收到你的数据时，你只需要做另一个效果

import React, {useState, useEffect, useCallback} from 'react';
import axios from 'axios';
type ServerRenderedPropsType = {
url: string,
init?: () => void,
};
function ServerRendered(props: ServerRenderedPropsType) {
const [html, setHtml] = useState('');
const fetchData = useCallback(async () => {
const result = await axios(props.url);
setHtml(result.data.title);
}, [props.url])
useEffect(() => {
fetchData();
}, [fetchData]);
useEffect(() => {
// do what you want here
if (!html) return;
props.init()
}, [html])
return <div dangerouslySetInnerHTML={{__html: html}} className="serverRendered" />;
}
export default ServerRendered;