ReactJS中如何将一个文件的数组数据传递到另一文件使用

解决方案 #

你当前写法无法直接实现的核心原因是：photos是定义在Upload组件函数内部的局部变量，受函数作用域限制，仅能在Upload组件内部访问，无法直接导出到外部文件使用。可以根据photos的使用场景选择以下方案：

场景1：photos为固定静态数据

直接将photos移动到Upload组件外部的模块顶层，再导出即可：

// Upload 组件所在文件代码
// 将photos定义在组件外部，属于模块级变量，可以导出
export const photos = [
  {
    id: new Date().getMilliseconds().toString(),
    imagePath: "url..."
  },
];

const Upload = () => {
  // 组件内部如果需要使用photos直接引用即可
  return (
    <>
       {/* Markup .... */}
    </>
  );
};

export default Upload;

在另一个文件引入时的写法：

// 注意这里用命名导入，和导出的名称对应
import { photos } from './COMPONENT_NAME';
const Func = () => {
  return (
    <> {photos.map((item) => <div> code... </div> )} </>
  );
};

场景2：photos是会动态更新的变量（比如随用户上传操作新增/删除项）

普通导出的模块变量不具备响应式能力，修改后无法触发React组件重新渲染，需要用状态管理方案实现：

• 方案A：状态提升
  把photos的状态定义在两个组件的公共父组件中，通过props传递给两个组件：

// 公共父组件代码
import { useState } from 'react';
import Upload from './COMPONENT_NAME';
import Func from './Func文件路径';

const Parent = () => {
  // 将photos定义为响应式状态
  const [photos, setPhotos] = useState([
    {
      id: new Date().getMilliseconds().toString(),
      imagePath: "url..."
    },
  ]);

  return (
    <>
      {/* 把状态和修改状态的方法传给Upload组件，供上传操作修改数组 */}
      <Upload photos={photos} setPhotos={setPhotos} />
      {/* 把状态传给Func组件用于渲染 */}
      <Func photos={photos} />
    </>
  )
}

Func组件直接接收props使用即可：

const Func = ({photos}) => {
  return (
    <> {photos.map((item) => <div> code... </div> )} </>
  );
};

• 方案B：全局状态管理
  如果两个组件层级相差较远，不想逐层传递props，可以使用React Context、Zustand、Redux等全局状态方案存储photos状态，两个组件都可以直接读写该状态。

内容的提问来源于stack exchange，提问作者Meriegg