Reactjs 如何接收React.lazy（）、暂挂值并将其添加到状态变量号

在下面的示例中，我们如何使用

React.lazy（）

和

suspend

。我从

FirstComponent.js

获取随机值。如何使用FirstComponent值添加到

newNumber

并显示总数。因此，在每次渲染时，我们应该根据接收到的随机值获得不同的总数。可能吗

SecondComponent.js

import React, { useState, useEffect } from "react";
const FirstComponent = () => {
  const [numbers, setNumbers] = useState("");

  useEffect(() => {
    const randomNumber = [];
    const data = [10, 20, 30, 40, 50, 60];
    const random = Math.floor(Math.random() * data.length);
    randomNumber.push(data[random]);
    setNumbers(randomNumber);
  }, []);

  return <div>Hello First: {numbers}</div>;
};
export default FirstComponent;

import React from "react";
const SecondComponent = () => {
  return <div>Hello Second</div>;
};
export default SecondComponent;

从“React”导入React；
const SecondComponent=（）=>{
第二回你好；
};
导出默认组件；

您需要传递回调，如所示

const FirstComponent=React.lazy（（）=>import（“./other/FirstComponent”）；
导出默认函数App（）{
const[newNumber，setNewNumber]=useState（0）；
常量[randomNumber，setRandomNumber]=useState（0）；
useffect（（）=>{
setNewNumber（100）；
}, []);
返回(
{newNumber+randomNumber}
);
}
常量FirstComponent=（{set}）=>{
const[number，setNumber]=useState（0）；
useffect（（）=>{
常数随机数=数据[随机]；
setNumber（随机数）；
集合（随机数）；
}，[集]；
返回随机数：{Number}；
};

import React from "react";
const SecondComponent = () => {
  return <div>Hello Second</div>;
};
export default SecondComponent;

const FirstComponent = React.lazy(() => import("./other/FirstComponent"));

export default function App() {
  const [newNumber, setNewNumber] = useState(0);
  const [randomNumber, setRandomNumber] = useState(0);

  useEffect(() => {
    setNewNumber(100);
  }, []);

  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <FirstComponent set={setRandomNumber} />
        {newNumber + randomNumber}
      </Suspense>
    </div>
  );
}

const FirstComponent = ({ set }) => {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    const randomNumber = data[random];
    setNumber(randomNumber);
    set(randomNumber);
  }, [set]);

  return <div>Random Number: {number}</div>;
};