在 React 中出现错误“props.data.map 不是函数”

Question

我正在尝试制作一个表单，提交时数据将显示在下表中。我已经创建了 Form 和 Table 组件并将表单数据传递给 Table 组件。在表格组件中，我创建了 2 个组件； TableHeader 和 TableBody 并将数据从 Table 传递到 TableBody。但是，我收到一个错误：

props.data.map is not a function

这是我的代码：

Form.js

import React, { Component } from 'react';
import DisplayTable from '../Components/Table';
import Jumbotron from 'react-bootstrap/Jumbotron';
import Container from 'react-bootstrap/Container';


class Form extends Component {
  constructor(){
    super();
    //1st 3 state fields will fetch the input data and next 3 will store the updated state into it
    this.state={

      first:'',
      last:'',
      email:'',
      firstU:'',
      lastU:'',
      emailU:''
    };
    this.onInputChange=this.onInputChange.bind(this);
    this.onInputSubmit=this.onInputSubmit.bind(this);
  }

  //on input change captures the values of the fields into respective input fields (first,last,email)
  onInputChange=(event)=>{
    this.setState({
      [event.target.name]:event.target.value
    }
    )
    //console.log(event.target.value);
   // console.log('input change running');
  }
//sets the values on submit
  onInputSubmit=()=>{
   // this.setState();

    //console.log(this.state.first);
   this.submitData(this.state.first,this.state.last,this.state.email);
    //console.log('input submit running');
  }
  //sets the  onChange state into new state fields
  submitData=(first,last,email)=>{
    this.setState({
      firstU:first,
      lastU:last,
      emailU:email
    });
    console.log('submitData running');
  }
  render() {
    return (

         <Jumbotron fluid>
        <Container>
            <h1>Form</h1>
            <div className="App" align="center">
        <div class="row">
          <input
            name="first"
            onChange={this.onInputChange}
            type="text"
            value={this.state.first}
          />
          </div>
        <div class="row">
          <input
            name="last"
            onChange={this.onInputChange}
            type="text"
            value={this.state.last}
          />
        </div>
        <div class="row">
          <input
            name="email"
            onChange={this.onInputChange}
            type="email"
            value={this.state.email}
          />
        </div>

        <div class="row">
          <button name="submit" onClick={this.onInputSubmit}>
            Submit
          </button>

        </div>

      </div>
      {/*here passed entire state into single variable instead of passing like 
      this.state.first,this.state.last to reduce code
       */}
          <DisplayTable data={this.state}/>
          </Container>
        </Jumbotron>

    );
  }
}

export default Form;

Table.js

import React, { Component } from 'react';
import Jumbotron from 'react-bootstrap/Jumbotron';
import Container from 'react-bootstrap/Container';
import Table from 'react-bootstrap/Table';

//props.data will fetch value from the state
class DisplayTable extends Component{
  render(){
    //console.log("hi"+this.props.data.first);
    //const data=this.props;
    return (

         <Jumbotron fluid>
        <Container>
            <h1>Data</h1>
           <TableHeader/>
           <TableBody data={this.props}/>

          </Container>
        </Jumbotron>

    );
  }
}

const TableHeader= ()=> {
  return(
      <div>
        <Table striped bordered hover variant="dark">
          <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>email</th>
    </tr>
  </thead>

      </Table>
      </div>
  );
}

const TableBody = (props)=> {
 console.log("k"+props.data.first)
 const rows=props.data.map((row,index)=>{
  return(

    <div>
       <Table striped bordered hover variant="dark">
      <tbody>
    <tr>
      <td key={index}></td>
      <td>{row.first}</td>
      <td>{row.last}</td>
      <td>{row.email}</td>
    </tr>
  </tbody>
  </Table>
    </div>
  );
 })
 return ({rows});
}

export default DisplayTable;

Answer 1

解决此问题的一个好方法可能是像这样编辑您的状态：

this.state = {
  users: [
    {
      first: 'name',
      last: 'name',
      etc...
    },
    {
      first: 'name',
      last: 'name',
      etc...
    }   
  ],
  other: state //if need be
}

这样，您就有了一个用户数组，并且可以根据需要向表中添加更多用户。

然后你只需通过 props 将this.state.users 传递给你的子组件。

Answer 2

您的 props.data 是一个数组吗，因为 map 仅适用于数组。我认为您的数据在{} 中，但不在[] 中。请验证。

打印数据进行验证。