Question

我一直收到此错误：TypeError：robots.map不是函数。我几次检查代码都找不到错误。

import React from 'react';
import Card from './Card';
// import { robots } from './robots';

const CardList = ({ robots }) => { 
    return(
        
        <div>
            {
                robots.map((user, i) => {
                    return (
                        <Card 
                            key={i} 
                            id={robots[i].id} 
                            name={robots[i].name} 
                            email={robots[i].email} 
                            />
                    );
                })

                
            }
        </div>
    );
}

export default CardList;

App.js 

import React, { Component } from 'react';
import CardList from './CardList';
import SearchBox from './SearchBox';
import { robots } from './robots';




class App extends Component {
    constructor(){
        super()
        this.state = { 
            robots:'robots',
                searchfield: ''}
    }
    render(){
        return(
                <div className='tc'>
                    <h1 className=''>RoboFriends</h1>
                    <SearchBox />
                    <CardList robots={this.state.robots}/>
                </div>
        );

    }

}

export default App;

我使用调用CardList的App.js更新了初始代码。

我最近开始学习react，希望开发一个应用程序，让您搜索可以立即过滤并呈现在搜索框中键入的名称的用户。

Answer 1

您从robots而不是从导入的文件中将props作为App internal state传递。

从导入的App文件中设置robots组件的状态

import { robots } from './robots'

class App extends Component {
  constructor() {
    super()
    this.state = { 
      robots,
      searchfield: ''
    }
  }

  render() {
    return (
      <div className='tc'>
        <h1 className=''>RoboFriends</h1>
        <SearchBox />
        <CardList robots={this.state.robots}/>
      </div>
    );
  }
}

将索引用作React键也是一种不好的做法，您在每个机器人对象中都有一个唯一的ID，因此请将其用作键，并了解map函数以及如何访问迭代元素

const CardList = ({ robots }) => (
  <div>
    {robots.map(robot => (
      <Card 
        key={robot.id} 
        id={robot.id} 
        name={robot.name} 
        email={robot.email} 
      />
    ))}
  </div>
);

Answer 2

您正在传递要映射的字符串，而是传递了机械手的对象列表并查看结果。这些错误是由于传递了要映射的列表以外的东西而导致的

TypeError：robots.map不是函数

2 个答案: