React 页面传值到 Modal 组件，Modal 使用 useEffect 获取数据为 null 的解决方案

首先，请确保在传值给 Modal 组件时，数据是正确的。

在 React 中，如果你想在 Modal 组件中使用传入的数据，可以使用 props 来接收并传递给 Modal 组件。

例如，假设你的页面组件为 Page，你想将数据传递给 Modal 组件：

import React, { useState } from 'react';
import Modal from './Modal';

const Page = () => {
  const [data, setData] = useState(null);

  const handleOpenModal = () => {
    // 设置数据
    setData('Hello World');
  }

  return (
    <div>
      <button onClick={handleOpenModal}>打开 Modal</button>
      <Modal data={data} />
    </div>
  );
}

export default Page;

在 Modal 组件中，你可以使用 props 来获取传入的数据：

import React, { useEffect } from 'react';

const Modal = (props) => {
  useEffect(() => {
    console.log(props.data); // 此处应该输出 'Hello World'
  }, [props.data]);

  return (
    <div>
      {/* Modal 内容 */}
    </div>
  );
}

export default Modal;

在 Modal 组件中，使用 useEffect 来监听传入的数据的变化，并在变化时执行相应的逻辑。确保在 useEffect 的依赖数组中添加 props.data，这样当传入的数据发生变化时，useEffect 会重新执行。