reactjs - 如何在另一个副作用呈现 react 组件后执行副作用

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;