Javascript 为什么我的React中的模块构建失败？

如果有人能帮忙的话。我想不出来。我一直收到一个错误：

未捕获错误：模块构建失败：重复声明“状态”

我在一个文件中有一个名为hook.js的钩子，它读取以下内容：

import React, { useState } from "react";

export const hook = () => {
  const [status, setStatus] = useState([
    { title: "Progress", view: 1, total: 20 },
    { title: "Pending Initial", view: 3, total: 1 },
    { title: "Pending Review", view: 3, total: 3 }
  ]);
  return { status };
};

然后是main.js，在那里我调用了钩子，我得到了这个错误

import React from "react";
import { hook } from "./hook;

const StatusTable = ({ status }) => {
  const { status } = useComponentLogic(status);

  const StatusTableHeader = ({ status }) => {
    let header = Object.keys(status[0]);
    return header.map((key, index) => {
      return <th key={index}>{key.toUpperCase()}</th>;
    });
  };


  return (
    <div>
      <table id="status">
        <tbody>
          <tr>
            {StatusTableHeade()}
          </tr>
        </tbody>
      </table>
    </div>
  );
};

export default StatusTable;

从“React”导入React；
从“/hook”导入{hook}；
const StatusTable=（{status}）=>{
const{status}=useComponentLogic（状态）；
const StatusTableHeader=（{status}）=>{
让header=Object.keys（状态[0]）；
返回header.map（（键，索引）=>{
返回{key.toUpperCase（）}；
});
};
返回(
{StatusTableHeade（）}
);
};
导出默认状态表；

我做错了什么

---

提前感谢！！

这是因为

StatusTable

组件的desctured props和

useComponentLogic

钩子的返回值共享相同的变量名

status

，这肯定不起作用，因为它们都在同一范围内声明

const StatusTable = ({ status }) => {
  const { status } = useComponentLogic(status);
...
}

您应该为它们使用不同的名称。一种方法是将

状态

道具分解为不同的属性名称

const StatusTable = ({ status: inputStatus }) => {
  const { status } = useComponentLogic(status);

  ...

}