javascript - 为什么 this.props.map 不是一个函数？-6ren

javascript - 为什么 this.props.map 不是一个函数？

转载作者：行者123 更新时间：2023-12-02 22:14:26

25

4

class Pokedex extends Component {
    static defaultProps =
    [
        {id: 4, name: 'Charmander', type: 'fire', base_experience: 62},
        {id: 7, name: 'Squirtle', type: 'water', base_experience: 63},
        {id: 11, name: 'Metapod', type: 'bug', base_experience: 72},
        {id: 12, name: 'Butterfree', type: 'flying', base_experience: 178},
        {id: 25, name: 'Pikachu', type: 'electric', base_experience: 112},
        {id: 39, name: 'Jigglypuff', type: 'normal', base_experience: 95},
        {id: 94, name: 'Gengar', type: 'poison', base_experience: 225},
        {id: 133, name: 'Eevee', type: 'normal', base_experience: 65},
    ];
    render(){
        return(
            <div className="Pokedex">
                <h1>Pokedex</h1>
                {this.props.map((item) => {return <Pokecard {...item} />})};


            </div>
        )
    }
}

export default Pokedex;

这是我的代码，我收到错误:

TypeError: this.props.map is not a function.

我的defaultProps不是一个数组吗？为什么 map 方法不起作用？

最佳答案

在 React 中，props 始终是一个对象。

当您尝试将数组分配给defaultProps时，该数组将转换为对象。所以 this.props.map 将不是一个函数。

您可以注释错误行，然后添加{JSON.stringify(this.props)}

class Pokedex extends React.Component {
  static defaultProps = [
    { id: 4, name: 'Charmander', type: 'fire', base_experience: 62 },
    { id: 7, name: 'Squirtle', type: 'water', base_experience: 63 },
    { id: 11, name: 'Metapod', type: 'bug', base_experience: 72 },
    { id: 12, name: 'Butterfree', type: 'flying', base_experience: 178 },
    { id: 25, name: 'Pikachu', type: 'electric', base_experience: 112 },
    { id: 39, name: 'Jigglypuff', type: 'normal', base_experience: 95 },
    { id: 94, name: 'Gengar', type: 'poison', base_experience: 225 },
    { id: 133, name: 'Eevee', type: 'normal', base_experience: 65 }
  ]
  render () {
    return (
      <div className='Pokedex'>
        <h1>Pokedex</h1>
        {/*this.props.map((item) => {return <Pokecard {...item} />})*/}
        {JSON.stringify(this.props)}
      </div>
    )
  }
}

ReactDOM.render(<Pokedex />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<body>
  <div id="root"></div>
</body>

关于javascript - 为什么 this.props.map 不是一个函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59436546/

25

4

0

文章推荐： javascript - 为什么追加不起作用？ this.append 不是一个函数

文章推荐： javascript - 使用 PHP 和 JavaScript 列出目录中的文件

文章推荐： javascript - 模态对话框未打开聊天框的 JQuery

javascript - {props.props.title}？为什么不是 {props.title}？
我仍在学习如何将 API 数据与 react 和 nextjs 一起使用。但是，为什么我的函数只在我编写 {props.props.title} 而不是我期望的 {props.title} 时起作用？
javascript - {props.props.title}？为什么不是 {props.title}？
我仍在学习如何将 API 数据与 react 和 nextjs 一起使用。但是，为什么我的函数只在我编写 {props.props.title} 而不是我期望的 {props.title} 时起作用？
reactjs - TypeScript Rest Props - 允许任何 Prop 或告诉组件它们将成为哪些 Prop
我正在用 TypeScript 构建一个 React 应用程序。我有一个 RequiresPermission基于谓词的组件应该渲染一个或另一个组件并转发所有 Prop 。 type Props =
javascript - 如何通过 this.props.children() 而不是 this.props.children 传递 props
我想通过 gatsby 布局传递我所有的 props。例如: import React, { Component } from 'react'; export default class Exampl
objective-c - self.prop=nil;与 [prop release];prop=nil;
如果我使用合成属性，那我为什么不直接说: self.property = nil; 这将释放引用计数，并确保我没有悬挂指针。看起来很简单，但我看到的 99% 的代码似乎都是这样做的: [proper
javascript - Prop 验证中缺少功能组件中的 Prop
Eslint 抛出 eslint(react/prop-types) 错误，尽管已经声明了 propTypes。我正在使用 eslint-plugin-react 我研究了其他几个类似的问题以及 li
javascript - Prop 验证中缺少 Prop
我正在使用以下由 linter eslint-plugin-react 解析的代码。它返回警告: "product is missing in props validation" 当我在底部的 pro
reactjs - 类型 '(props: Props) => Element[]' 不可分配给类型 'FunctionComponent'
我正在尝试在 React 应用程序中添加 TypeScript。版本: "react": "16.9.0", "typescript": "3.5.3", 我有一个像这样的数组 import aLo
javascript - React Prop - 如果另一个 Prop 为空/空，则在 Prop 上设置 isRequired
我有一个组件 . 如果组件没有 this.props.children , 我想设置 Prop ariaLabel作为isRequired ，否则 in 可以是可选的。我该怎么做？ ariaLabe
javascript - obj 中的 prop 与 obj.hasOwnProperty(prop) 和 obj[prop] 的区别？
我应该用一个代替另一个吗？一起使用它们更好吗？谢谢。最佳答案 prop in obj 检查 obj 是否有名为 prop 的属性，即使它只是从原型(prototype)继承而来。 obj.hasOw
reactjs - 如何为 React props 定义 TypeScript 类型，其中仅当 prop A 传递给组件时才接受 prop B？
我的组件 Text有 2 个 Prop :isHideable: boolean和 hidden: boolean .我如何允许 Hidden仅在 isHideable 时作为 Prop 是true
reactjs - 当带有错误 Prop 的 React 功能组件 (React.FC) 作为 Prop 发送时，Typescript 不会提示？
我试图将带有一些 Prop 的功能组件发送到另一个组件，并在接收组件中尝试键入检查该组件的某些 Prop 。这是代码: // BaseButton.tsx export type ButtonProp
reactjs - 根据传递的组件推断 Prop 类型也作为 Prop
是否可以从也作为 prop 传递的未知组件推断出正确的 props 类型？如果已知组件(存在于当前文件中)，我可以获得 Prop : type ButtonProps = React.Compone
javascript - 如何将自定义 Prop 传递给 Prop ？
我对 react 还很陌生，这是我正在努力解决的问题。有一个父组件家长它将 Prop 传递给 child 。其中一个 Prop ，包括一个要渲染的元素，如下所示: 在子组件中，我想获取这个组
reactjs - 是否可以根据子组件 props 推断父组件 props
我想做一个 Tabs推断 active 的可能值的组件prop 基于它的 child 拥有的东西 name Prop 。这就是我尝试这样做的方式: import React from 'react'
reactjs - Prop 未定义，但我可以看到它控制台记录 Prop
我对 react 还很陌生，并且只有当用户开始向下滚动时，我才尝试将更多信息加载到记录数组中。问题是新信息出现在数组中，但如果您尝试调用它，它将返回undefined。我在这里不明白什么？父组件:
javascript - 对象用 ...props 解构所有 Prop
因此，如果我对一个组件有很多不同的 Prop ，我希望我可以做类似的事情 const { ...props } = props; 而不是 const { prop1, prop2, prop3, ..
javascript - 比较对象 Prop 级别与可选 Prop
这是我寻求指导的问题类型，因为我不确定我正在寻找的内容是否存在...... 上下文:我正在使用 Firestore 来保存数据，并且正在构建一个可重用的自定义 Hook (React 16.8)，以便
reactjs - React Prop 类型根据标志不同所需的 Props
我有一个 React 组件，它获取一个配置对象作为 prop，它看起来像这样: { active: true, foo: { bar: 'baz' } } 在
javascript - 使用带有附加 Prop 的传播 Prop
如何附加另一个属性？我有一个 react 组件，其中有人传入 ...props，我想附加一个额外的 Prop 最佳答案请记住，传递 Prop 的顺序将决定将哪个值传递给该组件。这适用于有两个同名

首页

博学

6Ren·AI

商城

javascript - 为什么 this.props.map 不是一个函数？