Question

我正在编写一个调用prop的函数，该prop调用数组中的对象，并且不断抛出此错误：

TypeError：undefined不是一个函数（在'... robots.map ...'附近）

我认为这是在谈论用户，但我不知道。任何帮助将不胜感激，这是我的代码

此文件CardList.js上引发了错误

    import React from 'react';
    import Card from './Card';

    const CardList = ({ robots }) =>{
    //the line under this is the one throwing the error
      const cardComponent = robots.map((user, i)=>{ 
        return <Card id={robots[i].id} name={robots[i].name} email=  {robots[i].email} /> 
      });
      return(
        <div>
          {cardComponent}
        </div>
      );
    }

    export default CardList;

这是robots.js文件，我只是将几个对象放在数组中，这样您就可以了。

    export const robots = [
      {
        id: 1,
        name: 'Leanne Graham',
        username: 'Bret',
        email: 'Sincere@april.biz'
      },
      {
        id: 2,
        name: 'Ervin Howell',
        username: 'Antonette',
        email: 'Shanna@melissa.tv'
      },
      {
        id: 3,
        name: 'Clementine Bauch',
        username: 'Samantha',
        email: 'Nathan@yesenia.net'
      }
    ];

这是index.js文件

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import CardList from './CardList';
    import { robots } from './robots';
    import 'tachyons';
    import * as serviceWorker from './serviceWorker';

    ReactDOM.render(<CardList robots={'robots'}/>, document.getElementById('root'));

    serviceWorker.unregister();

Answer 1

这里有一个错字： ReactDOM.render(<CardList robots={'robots'}/>, document.getElementById('root'));

应为： ReactDOM.render(<CardList robots={robots}/>,document.getElementById('root'));，其中robots是您要导入的变量的名称，而不是字符串。

Answer 2

您正在传递字符串（'robots'）而不是从robots导入的数组（'./robots'）。因此，map函数存在于Array的原型上，但不存在于String的原型上，这就是它引发错误的原因。

要解决此问题，

<CardList robots={'robots'}/>

应替换为

<CardList robots={robots}/>

为什么总是说用户未定义？

2 个答案: