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>;