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结果如下：

React抛出此错误：

错误：对象作为React子对象无效（找到：带键的对象） {Nummer，Bezeichnung，id}）。如果你想渲染一个集合 children，使用数组代替或使用包装对象来自React附加组件的createFragment（对象）。检查渲染方法 Freight。

如何以可接受的格式转换AJAX JSON结果？

更新

运费部分：

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

JSX只能渲染元素null或string。您正在传递Object，因此会因错误而失败。您只需使用string将每个对象转换为JSON.stringify。

无效的方案（在render()内）：

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

有效方案：

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

Answer 2

我已经解决了这个问题。 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响应中的数组/对象，因此我无法直接输出此数组/对象。我需要输出数组/对象的值，而不是数组/对象本身。谢谢你的帮助！

AJAX JSON结果反应状态属性

2 个答案: