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

【问题标题】：Why am I getting a Module Build Failed in my React?为什么我的 React 中的模块构建失败？
【发布时间】：2020-05-29 01:06:11
【问题描述】：

如果有人可以帮忙。我无法弄清楚这一点。我不断收到错误：

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

我在一个文件中有一个名为 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;

我做错了什么？

提前致谢！！

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

那是因为 StatusTable 组件的 descturtured props 和 useComponentLogic 钩子的返回值共享相同的变量名 status，这绝对行不通，因为它们都声明在同一个范围。

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

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

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

  ...

}

【讨论】：