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

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;