如何重新渲染不同的 React 功能组件？

Question

我正在尝试解决如何重新呈现不同功能组件的问题。

onComplete: function (data) {
        console.log("everything is complete");
        console.log("this is the applicant id", id);               
        let obj;
        axios
          .post("http://localhost:5000/post_id", {
            applicant_id: id,
          })
          .then((response) => {
            obj = response.data.data.data.json_data.result;
          });
        setTimeout(() => {
          if (obj === "clear") {
            onfidoOut.tearDown(); // <- the Onfido view did not unmount
            renderResult();  // <- BAD APPROACH? `renderResult` renders a HTML node instead of triggers a view rerender.
          }
        }, 3000);
      },

我开始采用渲染 HTML 节点而不是触发视图重新渲染的方法，因为我从未在 class- 中的身份验证流程之外对其他组件实现视图重新渲染基于组件。这也是一个微前端应用程序。这是从中获取上述代码片段的整个文件：

const useOnfidoFetch = (URL) => {
  const [token, setToken] = useState();
  const [id, setId] = useState();

  useEffect(() => {
    axios
      .get("http://localhost:5000/post_stuff")
      .then((response) => response.data.data.data.json_data)
      .then((json_data) => {
        console.log("this is the json data", json_data);
        const id = json_data.applicant_id;
        const token = json_data.onfido_sdk_token;
        setId(id);
        setToken(token);
      });
  }, [URL]);

  useEffect(() => {
    if (!token) return;
    console.log("this is working!");
    OnfidoSDK.init({
      token,
      containerId: "root",
      steps: [
        {
          type: "welcome",
          options: {
            title: "Open your new bank account",
          },
        },
        "document",
      ],
      onComplete: function (data) {
        console.log("everything is complete");
        console.log("this is the applicant id", id);
        let obj;
        axios
          .post("http://localhost:5000/post_id", {
            applicant_id: id,
          })
          .then((response) => {
            obj = response.data.data.data.json_data.result;
          });
        setTimeout(() => {
          if (obj === "clear") {
            onfidoOut.tearDown();
            renderResult();
          }
        }, 3000);
      },
    });
  }, [id, token]);

  function renderResult() {
    return <Redirect to="/result" />;
  }
};

export default function() {
  const URL = `${transmitAPI}/anonymous_invoke?aid=onfido_webapp`;
  const result = useOnfidoFetch(URL, {});

     return (
        <div id={onfidoContainerId} />
     )
}

这是 bootstrap.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import {createMemoryHistory, createBrowserHistory} from 'history';
import App from './App';

// Mount function to start up the app
const mount = (el, { onNavigate, defaultHistory, initialPath}) => {
  const history = defaultHistory || createMemoryHistory({
     initialEntries: [initialPath],
  });

  if (onNavigate) {
    history.listen(onNavigate);
  }

  ReactDOM.render(<App history={history} />, el);

  return {
    onParentNavigate({ pathname: nextPathname }) {
      const {pathname} = history.location;

      if (pathname !== nextPathname) {
        history.push(nextPathname);
      }
    },
  };
};

// If I am in development and isolation
// call mount immediately
if (process.env.NODE_ENV === 'development') {
  const devRoot = document.querySelector('#_marketing-dev-root');

  if (devRoot) {
    mount(devRoot, {defaultHistory: createBrowserHIstory()});
  }
}

// Assuming we are running through container
// and we should export the mount function
export {mount};

Answer 1

似乎obj（来自response）可以用来管理状态，例如：

const [receivedResults, setReceivedResults] = useState(false);

然后当收到响应时：

setReceivedResults(obj === "clear");

并使用标志允许组件呈现自身（不确定确切的语法）：

if (receivedResults) {
   return <Redirect to="/result" />;
} else {
   return null;
}

如何重新渲染不同的 React 功能组件？

How do I rerender a different React functional component?

javascript

reactjs

micro-frontend