Question

在ContactList组件中，我无法初始化为Contact元素数组并显示数据集：

  import React from 'react';      
  var ContactForm = React.createClass({
            render: function(){
              return (
                <tr>
                  <td>
                  <input type="text" className="form-control" />
                  </td>
                  <td>
                  <input type="text" className="form-control"/>
                  </td>
                  <td>
                  <input type="text" className="form-control" />
                  </td>
                  <td>
                  <input type="button" className="btn btn-primary" value="Add"/>
                  </td>
                </tr>
                )
            }
          });    
        var Contact = React.createClass({
              render: function(){
                  return (
                          <tr >
                             {this.props.contact.name}
                             {this.props.contact.address}
                             {this.props.contact.phone_number}
                          </tr>

                    ) ;
                }
              });

        var ContactList = React.createClass({
              render: function(){
                  var contactRows = this.props.list.map( item => {
               return <Contact key={item.name} contact={item} /> //something wrog here
           }); 
                        return (
                      <tbody >
                          {contactRows}
                          <ContactForm />
                      </tbody>
                    ) ;
                }
              });

        var ContactsTable = React.createClass({
              render: function(){
                  return (
                    <table className="table table-bordered">
                          <thead>
                            <tr>
                            <th>Name</th>
                            <th>Address</th>
                            <th>Phone Number</th>
                            </tr>
                          </thead>
                          <ContactList contacts={this.props.contacts}  />
                    </table>
                    );
              }
          });
       var ContactsApp = React.createClass({
          render: function(){
              return (
                    <div>
                       <h1>Contact List.</h1>
                       <ContactsTable list ={this.props.contacts}  /> 
                    </div>
              );
          }
      });
//=====================================================//
index.js 

import '../node_modules/bootstrap/dist/css/bootstrap.css';  
import React from 'react';
import ReactDOM from 'react-dom';
import ContactsApp from './App';

     var contacts = [
            {
                "name": "Contact 1",
                "address": "123 Test St",
                "phone_number": "132-3212"
            },

            {
                "name": "Contact 2",
                "address": "23 Main St",
                "phone_number": "934-4329"
            },

            {
                "name": "Contact 3",
                "address": "4 Lower St",
                "phone_number": "432-5832"
            },

            {
                "name": "Contact 4",
                "address": "49 Upper Street",
                "phone_number": "934-4290"
            }
          ] ;       

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

Answer 1

<ContactsTable list ={this.props.contacts}  />

在上面一行中，您传递了list，但在课程中您尝试访问this.props.contacts。将两者都更改为list或contacts：

<ContactList contacts={this.props.contacts}  />
             ^^^ your prop name is list

同样在这里：

<ContactList contacts={this.props.contacts}  />

您已通过contacts，但之后尝试在地图通话中访问班级中的this.props.list：

var contactRows = this.props.list.map( item => {
                             ^^^^ your prop name is contacts

React JS - 如何使用组件显示数据集？

1 个答案: