React.lazy(), Suspense 值如何接收并添加到状态变量号答案

【问题标题】：How do the React.lazy(), Suspense value received and add to state variable numbersReact.lazy(), Suspense 值如何接收并添加到状态变量号
【发布时间】：2023-04-08 10:18:01
【问题描述】：

我们如何在下面的示例中使用React.lazy() 和Suspense。我从FirstComponent.js 获得随机值。如何使用 FirstComponent 值添加到 newNumber 并显示总数。所以每次渲染时，我们应该根据接收到的随机值得到不同的总数。这可能吗？

https://codesandbox.io/s/condescending-lamarr-ny680?file=/src/App.js:0-635

import React, { Suspense, useState, useEffect } from "react";
import "./styles.css";

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

export default function App() {
  const [newNumber, setNewNumber] = useState("");
  useEffect(() => {
   const num1 = 100;
   setNewNumber(num1);
  }, []);
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <FirstComponent />
          {newNumber + FirstComponent}
        </section>
        <section>
          <SecondComponent />
        </section>
      </Suspense>
    </div>
  );
}

FirstComponent.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;

SecondComponent.js

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

【问题讨论】：

标签： reactjs react-hooks react-suspense

【解决方案1】：

你需要传递一个回调，如data in React flows down。

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>;
};

【讨论】：