Question

我对ReactJS很新，所以请保持温和。我正在使用ReactJS CDN和babelJS CDN。

我最初使用JSON数组将这段代码放在一起。但我试图将它从数组转换为JSON文件。此JSON文件将在后台与Microsoft CMS保持同步。

当我的JSON在我的文档顶部出现时，这一切都运行良好

var contactsData = [
    {
        "id": 1,
        "name": "Name",
        "job": "Job Title",
        "email": "Email Address",
        "phone": "Phone Number",
        "profileImg": "Image URL"
    },
    {
        "id": 2,
        "name": "Name",
        "job": "Job Title",
        "email": "Email Address",
        "phone": "Phone Number",
        "profileImg": "Image URL"
    },
    {
        "id": 3,
        "name": "Name",
        "job": "Job Title",
        "email": "Email Address",
        "phone": "Phone Number",
        "profileImg": "Image URL"
    }
];

但现在我的JSON文件看起来相同

[
        {
            "id": 1,
            "name": "Name",
            "job": "Job Title",
            "email": "Email Address",
            "phone": "Phone Number",
            "profileImg": "Image URL"
        },
        {
            "id": 2,
            "name": "Name",
            "job": "Job Title",
            "email": "Email Address",
            "phone": "Phone Number",
            "profileImg": "Image URL"
        },
        {
            "id": 3,
            "name": "Name",
            "job": "Job Title",
            "email": "Email Address",
            "phone": "Phone Number",
            "profileImg": "Image URL"
        }
    ]

我的代码如下

/////
// EMPLOYEES COMPONENT
/////
const EmployeeSearch = React.createClass({
  getInitialState: function(){
      return { searchString: '' };
      return { orderSelect: '' };
  },
  getInitialState: function(){
      return { searchString: '' };
      return { orderSelect: '' };
      this.state = {
          data: []
      };
  },
  handleChange: function(e){
      this.setState({searchString:e.target.value});
  },
  change: function(e){
      this.setState({orderSelect: e.target.value});
  },
  render: function() {

      var employeesJSON = this.props.url,
          orderByDesc = "",
          searchString = this.state.searchString.trim().toLowerCase(),
          userCount =  employeesJSON.length,
          orderBy = this.state.orderSelect;


      if(searchString.length > 0){
        employeesJSON = employeesJSON.filter(function(l){
              return (
                  l.name.toLowerCase().match( searchString ) || 
                  l.email.toLowerCase().match( searchString ) || 
                  l.job.toLowerCase().match( searchString )
              );

          });
          userCount = employeesJSON.length;
      }

      if( orderBy == "asc") {
        employeesJSON.sort(function(a,b){
              return a.name.toLowerCase() > b.name.toLowerCase();
          })            
      } else if (orderBy == "desc") {
        employeesJSON.sort(function(a,b){
              return a.name.toLowerCase() < b.name.toLowerCase();
          })
      }

      return(
          <div className="main-content">
                  <div className="row">
                      <div className="col small-12 medium-auto">  
                          <input type="search" className="form__input" value={this.state.searchString} onChange={this.handleChange} placeholder="Search by name, email & position " />
                      </div> 
                      <div className="col small-12 medium-1">  
                      </div>                 
                      <div className="col small-12 medium-auto align-right">  
                          <div className="form__select">
                              <select onChange={this.change} defaultValue="" value={this.state.orderSelect}>
                                  <option value="" disabled>Sort by</option>
                                  <option value="asc">A-Z</option>
                                  <option value="desc">Z-A</option>
                              </select>
                          </div>                   
                      </div>         
                  </div>

                  <p>Contact count: {userCount}</p>

                  <div className="card__wrapper row">

                  {
                      employeesJSON.map(function(l){
                          return( 
                              <div className="col small-6 medium-4 large-3"> 
                                  <div className="card"> 
                                      <div className="card__content">
                                          <img src={l.profileImg} alt={l.name} className="card__image" />
                                          <h3 className="card__name">{l.name}</h3>
                                          <p className="card__email">{l.job}</p>
                                          <a href={"mailto:" + l.email} className="button" target="_blank">Send email</a>
                                      </div>
                                  </div>  
                              </div>                             
                          ) 
                      })
                  }

                  </div>

          </div>            
      );

  }
});


/////
// PAGE - EMPLOYEES
/////
const Employees = () => (
    <div>
        <EmployeeSearch url="../json/employees.json" />
    </div>
)

/////
// RENDER APP
/////
ReactDOM.render(
    <Employees />,
    document.getElementById('app')
);

Answer 1

这是因为您的employeesJSON道具传递给您的EmployeeSearch组件是一个字符串而不是一个数组，因此触发＆＃39;地图不是一个功能＆＃39; （在一个字符串上）。

您必须将json文件导入代码，然后将其作为道具传递。

Here is the [es6] import, export, default cheatsheet

然后，您将在employees.js文件中声明您的对象，将其导出，将其导入您使用EmployeeSearch组件的位置并将其作为道具传递。

```

// employees.js file

 const employeeJSON = [ 
   { },
   { },
]

export default employeeJSON;

// file where you use your EmployeeSearch component

(at the top of your file import your employeeJSON array) :

 import employeeJSON from 'path/to/your/employee.js file'

<EmployeeSearch employee={employeeJSON} />

// and then is your component you can do :

render() {
const employee = this.props.employee;
};

```

ReactJS - .map不是函数 - 从JSON数组转换为JSON文件

1 个答案: