react页面传值到modalmodal页使用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会重新执行