导入 const 数组 React

2024-02-13

我尝试将一个数组导入到我的父组件中,并将该数据作为道具发送给他的孩子

import Seed from './const/Seed';

export default class ProductList extends React.Component{
  render() {
    const product = Seed.products[0]
    return(
      <div>
        <Product 
        id = {product.id}
        title = {product.title}
        />
      </div>
    );
  }
}

我收到一个错误: 类型错误:无法读取未定义的属性“0”

也许我没有以正确的方式格式化? 或者有没有办法在不同的文件上声明 const ?

export default class Seed extends React.Component{
  render(){
    const products  = [
      {
        id: 1,
        title: 'Yellow Pail',
      },
      {
        id: 2,
        title: 'Green Pail',
      }
    ]
    return products
  }
}

谢谢


种子文件应该是:

export const products  = [
  {
    id: 1,
    title: 'Yellow Pail',
  },
  {
    id: 2,
    title: 'Green Pail',
  },
]

export default {
    products,
}

并将它们导入为(和用法为):

import {products} from './const/Seed';
export default class ProductList extends React.Component{
  render() {
    const product = products[0]
    return(
      <div>
        <Product 
        id = {product.id}
        title = {product.title}
        />
      </div>
    );
  }
}

render方法用于在浏览器上呈现内容,而不是用于导出常量。请再次回顾一下react/JavaScript

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

导入 const 数组 React 的相关文章

随机推荐

  • 需要在github actions中设置环境

    每次工作流程运行时 我都需要安装几个 cli 这会在安装 构建和发布包方面占用大量时间 有哪些好的替代方案可以摆脱每次安装 要扩展 joseph 的答案 请创建一个 Docker 映像 该映像使用您需要的 CLI 工具准备环境 然后将其发布
  • 为什么工厂女孩不排序独特的属性?

    我的控制器规范失败 因为 Factory Girl 似乎正在创建非唯一的用户 即使我对需要唯一的用户属性进行了排序 错误 1 TopicsController POST create when topic is invalid should
  • Google Play - 为现有用户更新未发布的应用程序,但不为新用户更新?

    我在 Google Play 上有一个未发布的应用程序 我想为现有用户更新该应用程序 但不允许新用户下载它 Google Play 文档似乎说这可以通过简单地上传更新的 apk 而不是重新发布应用程序 来完成 未发布的应用程序 即使您取消发
  • git 如何知道它在 git 存储库中

    我感兴趣的是如何git实际上知道它在 git 存储库中 我的第一个想法是它只是将文件夹结构爬到根目录 这可能涉及权限错误 它在任何地方都有记录吗 经验法则是 Git 只是查找文件路径来查找 git 目录 但事实并非如此 正如爱德华 汤姆森所
  • c#:如何将exe文件嵌入到资源中?

    我用 Costura Fody 有一个应用程序 Test exe 它以这种方式运行进程internalTest exe ProcessStartInfo prcInfo new ProcessStartInfo strpath Create
  • 与其他顶级类同名的 Java 内部类

    我有与 Java 内部类相关的问题 有没有办法从定义内部类 A 的顶级类 Main 访问顶级类 A 下面是演示该问题的示例代码 class A Outer Class A System out println A outer class B
  • 找到多个集合的交集的最佳方法?

    我有一个集合列表 setlist s1 s2 s3 我想要 s1 s2 s3 我可以编写一个函数来通过执行一系列成对的操作来完成此操作s1 intersection s2 etc 有推荐的 更好的或内置的方法吗 从 Python 2 6 版
  • Python 安装程序在初始化步骤被阻止

    我试图使用安装程序在我的计算机上安装Python3 6 但安装程序在初始化步骤被阻止 我想知道为什么会发生这种情况 我也尝试了Python2 7 但它也在同一个地方被阻止 它在这里被阻止 取消选中为所有用户安装的选项 这为我排序了
  • 在 Swift 中以编程方式返回到之前的 ViewController

    我通过单击按钮将用户发送到页面 该页面是一个UITableViewController 现在 如果用户点击某个单元格 我想将他推回到上一页 我想到了类似的事情self performSegue back 但这似乎是一个坏主意 正确的做法是什
  • CreateProcessAsUser 不绘制 GUI

    我有一个在 SYSTEM 帐户下运行的 Windows 服务 用于检查每个登录用户是否正在运行特定的应用程序 如果应用程序未运行 服务将启动它 在相应的用户名下 我正在尝试使用 CreateProcessAsUser 来实现我的目标 该服务
  • 在数据表中正确渲染迷你图

    在下面发布的示例中 我尝试将 jquery sparkline 库中的迷你图渲染为 jquery dataTables 表中的数据列 加载下面的示例效果很好 但仅限于第一页 如果我单击 下一步 而不是将数据呈现为迷你图 它只会呈现数字 如果
  • Apache 背后的代理 React 服务器

    我刚刚使用 create react app 创建了一个 React 应用程序 该应用程序从端口 3000 启动 很好 我想使用前缀访问应用程序 在我的例子中是 node 和端口 80 即http localhost 节点 http loc
  • PHP 函数错误和成功模式

    当函数正常执行时 从 PHP 函数返回错误的最佳方法是什么 Example public function login user pw if this gt verifyUser user return error about invali
  • Google foobar 响应错误(400)

    我正在尝试解决Google的问题foob ar挑战 http www google com foobar 我不会向其他人破坏实际问题 但标题是 拯救 Beta Rabbit 我的解决方案是用 Java 编码的 每次我尝试验证它时 我都会得到
  • 在单独的表单上更改 NotifyIcon

    我有一个带有 NotifyIcon 的表单 Form1 我有另一个表单 Form2 我想更改 NotifyIcon 的图标 每当我使用此代码时 我都会在系统托盘中显示一个额外的图标 而不是更改当前图标 Form1 ico 是 NotifyI
  • 如何提示用户选择保存文件的位置?

    在我的主表单中 我有一个名为 SavePDFDocument 的方法 private void SavePDFDocument PDFWrapper pdfWrapper new PDFWrapper pdfWrapper CreatePD
  • getResponseCode 中的 HttpURLConnection 随机出现 SocketTimeoutException

    我在 con getResponseCode 中收到以下错误 java net SocketTimeoutException failed to connect to example com port 80 after 3000ms at
  • 如何在 SQLAlchemy 中实现空合并运算符?

    或者我该如何让这个东西发挥作用 我有一个 Interval 对象 class Interval Base tablename intervals id Column Integer primary key True start Column
  • Plotly.js:初始缩放

    我有 256 个数据点 当绘图首次出现时 我希望 x 轴自动缩放到沿 X 轴的特定范围 有办法吗 我必须以某种方式打到 D3 吗 就像是 Plotly plot graph some data trace xaxis range 0 1 t
  • 导入 const 数组 React

    我尝试将一个数组导入到我的父组件中 并将该数据作为道具发送给他的孩子 import Seed from const Seed export default class ProductList extends React Component