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

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;

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

How to perform a side effect after another side effect rendered a react component

reactjs

use-effect