AJAX JSON結果が状態プロパティーに反応する結果

Question

私はこのコンポーネントを持っています。私はajax経由でこのクラスの状態プロパティに貨物値をロードします。

import React, { Component } from 'react'; 
import Freight from './Freight'; 
import CreateFreightEntryModal from './CreateFreightEntryModal'; 
import createFragment from 'react-addons-create-fragment'; // ES6 

class FreightList extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      search: "", 
      freights: [], 
      parent: props.parent, 
      updateZonesTable: props.updateZonesTable 
     }; 
     this.loadFreights(); 
    } 

    componentWillReceiveProps(nextProps) { 
     this.setState({ 
      freights: nextProps.freights 
     }); 
    } 


    loadFreights() { 
     $.ajax({ 
      type: "POST", 
      context:this, 
      dataType: "json", 
      async: true, 
      url: "../data/get/json/freight", 
      data: ({ 
       _token : window.Laravel.csrfToken, 
      }), 
      success: function (data) { 

       var arr = $.map(data, function(el) { 
        return el; 
       } 
       return returnArray; 
       }); 

       this.setState({ 
       freights: arr 
       }); 

      } 
     }); 
    } 
... 
render() { 
     let filteredList = this.state.freights.filter((freight) => { 
      let search = this.state.search.toLowerCase(); 
      //var values = Object.values(freight); 
      var values = Object.keys(freight).map(function(itm) { return freight[itm]; }); 
      var flag = false 
      values.forEach((val) => { 
       if(val != undefined && val.toString().toLowerCase().indexOf(search) > -1) { 
        flag = true; 
        return; 
       } 
      }); 
      if(flag) 
       return freight; 
     }); 
     return (
      <div className="panel-group"> 
       <div className="panel panel-default"> 
        <div className="panel-heading"> 
         <a className="accordion-toggle" data-toggle="collapse" href="#freightListPanelBody"><i className="glyphicon glyphicon-menu-down" aria-hidden="true"></i> Freights</a> 
        </div> 
        <div className="panel-body" id="freightListPanelBody" className="collapse in"> 
         <div className="row padding10px"> 
          <div className="col-xs-12 col-sm-12 col-md-9 col-lg-9"> 
           <div className="form-group"> 
            <button className="btn btn-default" onClick={this.openCreateModal.bind(this)}>Create new entry</button> 
            <CreateFreightEntryModal onClose={this.onClose.bind(this)} onClick={this.onClick.bind(this)} /> 
           </div> 
          </div> 
         </div> 

         <div className="row padding10px"> 
          <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
           Search 
          </div> 
          <div className="col-xs-12 col-sm-12 col-md-9 col-lg-9"> 
           <div className="form-group"> 
            <input className="form-control" type="text" value={this.state.search} placeholder="Search" onChange={this.updateSearch.bind(this)} /> 
           </div> 
          </div> 
         </div> 
         <div className="row padding10px"> 
          <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12"> 
           <div className="table-responsive list"> 
            <table className="table table-hover table-striped" id="freightListTable"> 
             <thead> 
              <tr> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">ID</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Company</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Zone Logic</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Freight Type</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Transport Mode</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Haulier</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Haulier 2</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Warehouse</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">by quantity</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Quantity type</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">&#8960;-Freight</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone" colSpan="2">Price break</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Place of departure</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Customer</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Product</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Product group</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone" colSpan="2">Valid</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Min. quantity</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Supplier</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Currency</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">No. zip code places</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Haulier is supplier</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">from country</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Anzahl_pauschalstaffeln</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Palgewlogik</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Volumengewichtfracht</th> 
               <th className="padding5px whiteSpaceNoWrap borderBottomNone">Volgewfaktor</th> 
              </tr> 
              <tr> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone">from</th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone">until</th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone">from</th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone">until</th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
               <th className="padding5px whiteSpaceNoWrap borderTopNone"></th> 
              </tr> 
             </thead> 
             <tbody> 
             { 
              filteredList.map((freight)=> { 
               return (
               <Freight freight={freight} onClick={this.handleFreightClick.bind(this)} key={freight.id} /> 
              ); 
              }) 
             } 
             </tbody> 
            </table> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

export default FreightList 

私のAJAX結果は次のようになります。

が反応、このエラーがスローされます。

Error: Objects are not valid as a React child (found: object with keys {Nummer, Bezeichnung, id}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Freight .

はどのように反応のために許容可能なフォーマットでAJAX JSONの結果を変換することができますか？

UPDATE

貨物成分：

import React, { Component } from 'react'; 

class Freight extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      freight: props.freight, 
      onClick: props.onClick, 
      isChecked: false 
     }; 
    } 

    onClick(event) { 
     $('#freightListTable').find("input").removeAttr("checked"); 
     this.setState({isChecked: !this.state.isChecked}) 
     this.props.onClick(this.state.freight, !this.state.isChecked); 
    } 

    render() { 
     return (

       <tr className="cursorPointer" onClick={this.onClick.bind(this)}> 
        <td> 
         <div className="checkbox"> 
          <label> 
          <input type="checkbox" value="" checked={this.state.isChecked} /> 
          </label> 
         </div> 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.ID } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.firma } 
        </td> 
        <td className="whiteSpaceNoWrap verticalAlignBottom"> 
         { (this.state.freight.Zonenlogik == 1) ? "Yes" : "No" } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.frachtart } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.transportart } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         <small>{this.state.freight.spedit_nr}</small><br /> 
         { this.state.freight.spediteur } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.spedit2_nr } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         <small>{this.state.freight.lager_nr}</small><br /> 
         { this.state.freight.lager }<br /> 
         <span className="label label-danger ">{ this.state.freight.lagerSperr }</span> 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.per_menge } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.mengeneinheit } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { (this.state.freight.durchschnittsfracht == 1) ? "Yes" : "No" } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { (this.state.freight.ab_staffelmenge == 1) ? "Yes" : "No" } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { (this.state.freight.bis_staffelmenge == 1) ? "Yes" : "No" } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         <small>{ this.state.freight.art_zuordnungs_nr }</small><br /> 
         { this.state.freight.abgangsort } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         <small>{ this.state.freight.kdnr }</small><br /> 
         { this.state.freight.kunde }<br /> 
         <span className="label label-danger">{ this.state.freight.kundeSperr }</span> 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         <small>{ this.state.freight.artikel_nr } </small><br /> 
         { this.state.freight.artikel }<br /> 
         <span className="label label-danger">{ this.state.freight.artikelSperr }</span> 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         <small>{ this.state.freight.wog_nr }</small><br /> 
         { this.state.freight.wog }<br /> 
         <span className="label label-danger">{ this.state.freight.wogSperr }</span> 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.gueltig_von } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.gueltig_bis } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.mindestmenge } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         <small>{ this.state.freight.lieferanten_nr }</small><br /> 
         { this.state.freight.lieferant }<br /> 
         <span className="label label-danger">{ this.state.freight.lieferantSperr }</span> 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.waehrungName } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.suchart_nr } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { (this.state.freight.spedit_ist_lieferant == 1) ? "Yes" : "No" } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.land } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.anzahl_pauschalstaffeln } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.palgewlogik } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.volumengewichtfracht } 
        </td> 
        <td className="whiteSpaceNoWrap"> 
         { this.state.freight.volgewfaktor } 
        </td> 
       </tr> 

     ); 
    } 
} 

export default Freight 

Answer 1

私は問題を解決してきました。 Freightコンポーネントのヒントは私を助けました。 私はいつもFreightListコンポーネントのエラーを探していました。私は（例えばfirmaに）これを変更しなければならなかった

：

前者コード：

<td className="whiteSpaceNoWrap"> 
    { this.state.freight.firma } 
</td> 

溶液：

<td className="whiteSpaceNoWrap"> 
    { (this.state.freight.firma != null) ? this.state.freight.firma.Bezeichnung : '' } 
</td> 

this.state.freight.firmaので、JSON応答の配列/オブジェクトでありますこの配列/オブジェクトを直接出力することはできません。配列/オブジェクト自体の値ではなく、配列/オブジェクトの値を出力する必要があります。ご協力いただきありがとうございます！

Answer 2

JSXのみをレンダリングすることができるいずれかの要素、null、又はstring。 Objectを渡しているため、エラーが発生して期待通りに失敗します。それぞれのオブジェクトをJSON.stringifyを使用してstringに簡単に変換することができます。 （render()以内）

無効シナリオ：

const freightObject = { durchschnittsfracht: 1 }; 
return <div>{freightObject}</div>; 

有効なシナリオ：

const freightObject = { durchschnittsfracht: 1 }; 
return <div>{JSON.stringify(freightObject)}</div>;