ReactJS没有通过映射绑定到状态值

我正在与MVC5项目合作，并遇到React未绑定数组的问题。我在MVC核心项目中工作，但不得不"回归"回旧结构。最大的变化似乎是在控制器，从JsonResult (Core MVC)到Json (MVC5)的ajax调用的返回类型的变化。

下面是Chrome Developer Tools的输出:(由于缺少声望点而被移除)

，我的。jsx文件的代码:

var LineItem = React.createClass({
    render: function () {
        return (
            <div className="gridItem">
                <div className="lessLineHeight smallFont">
                    <div className='section group'>
                        <div className="col span_1_of_2" id={this.props.ordHeaderId}>
                            <text>{this.props.code}</text>
                        </div>
                        <div className='col span_1_of_2 text-right'>
                            <i className={this.props.apptIconString} aria-hidden='true'></i>
                            <i className={this.props.highValueIconString}></i>
                            <i className={this.props.hazmatIconString}></i>
                        </div>
                    </div>
                    <div className='section group'>
                        <div className='col span_6_of_10'>
                            <text title='Trading Partner - Client'>{this.props.tradingPartnerName}</text>
                        </div>
                        <div className='col span_4_of_10 text-right'>
                            <text className='overflowElip' title='Account Manager'>{this.props.accountManager}</text>
                        </div>
                    </div>
                    <div className='section group'>
                        <div className='col span_1_of_2'>
                            <text title={"Origin: " + this.props.originAddress + "; " + this.props.origContact}>{this.props.originAddress}</text>
                        </div>
                        <div className='col span_1_of_2 text-right'>
                            <text title={"Destination:" + this.props.destinationAddress + "; " + this.props.destContact}>{this.props.destinationCity}</text>
                        </div>
                    </div>
                    <div className='section group'>
                        <div className='col span_1_of_3'>${this.props.freightValue}</div>
                        <div className='col span_1_of_3 text-center'>
                            <a title='Promote Order to Load'>To Load</a>
                        </div>
                        <div className='col span_1_of_3 text-right' id={'datePlanned' + this.props.ordHeaderId}>
                            <text title='Pickup Date'>{this.props.dateCreated}</text>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});
var ItemList = React.createClass({
    getInitialState: function () {
        return { items: [] };
    },
    loadData: function () {
        $.ajax({
            url: this.props.url,
            dataType: 'json',
            success: function (data) {
                console.log(data);
                this.setState({ items: data });
                console.log(this.state.items);
                $("#column1").find(".gridItem:odd").css({ "background-color": "#ddd" }).end().find(".gridItem:even").css({ "background-color": "#fff" });
            }.bind(this),
            error: function (xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    componentDidMount: function () {
        this.loadData();
        /*window.setInterval(this.loadData, this.props.pollInterval);*/
    },
    render: function () {
        if (this.state.items) {
            console.log("State has items.");
            var itemNodes = this.state.items.map(function (foo) {
                return (
                        <LineItem key={foo.ordHeaderId}
                                  accountManager={foo.accountManager}
        apptIconString={foo.apptIconString}
        commodityDescription={foo.commodityDescription}
        commodityId={foo.commodityId}
        dateCreated={foo.dateCreated}
        deliveryAppt={foo.deliveryAppt}
        destContact={foo.destContact}
        destinationAddress={foo.destinationAddress}
        destinationAddressName={foo.destinationAddressName}
        destinationCity={foo.destinationCity}
        earlyDeliveryTime={foo.earlyDeliveryTime}
        earlyPickupTime={foo.earlyPickupTime}
        equipmentName={foo.equipmentName}
        freightValue={foo.freightValue}
        handlingUnits={foo.handlingUnits}
        hazmatIconString={foo.hazmatIconString}
        highValueIconString={foo.highValueIconString}
        isHazmat={foo.isHazmat}
        isHighValue={foo.isHighValue}
        lateDeliveryTime={foo.lateDeliveryTime}
        latePickupTime={foo.latePickupTime}
        loadId={foo.loadId}
        loadNum={foo.loadNum}
        loadTmsStatus={foo.loadTmsStatus}
        ordHeaderId={foo.ordHeaderId}
        ordNum={foo.ordNum}
        orderType={foo.orderType}
        origContact={foo.originContact}
        originAddress={foo.originAddress}
        originAddressName={foo.originAddressName}
        originationCity={foo.originationCity}
        pickupAppt={foo.pickupAppt}
        pieces={foo.pieces}
        plannedEnd={foo.plannedEnd}
        plannedStart={foo.plannedStart}
        requiredTemp={foo.requiredTemp}
        specialInstructions={foo.specialInstructions}
        targetCost={foo.targetCost}
        teamId={foo.teamId}
        tempControlled={foo.tempControlled}
        tradingPartnerNameCNum={foo.tradingPartnerNameCNum}
        tradingPartnerName={foo.tradingPartnerNameClient}
        transportMode={foo.transportMode}
        user3gIdBookedBy={foo.user3gIdBookedBy}
        user3gIdCreatedBy={foo.user3gIdCreatedBy}
        weight={foo.weight} />
                );
            });
            return (
                <div className="itemList">
                    {itemNodes}
                </div>
            );
        } else {
            return null;
        }
    }
});
ReactDOM.render(
    <ItemList url="/DispatchBoard/getColumn1Data" pollInterval={2000} />,
    document.getElementById('column1')
);

从图中可以看到，loadData函数中的render:看到从ajax调用返回的项，然后将它们设置为状态，但是当需要映射它们时，它什么也不做。

有什么我没看到的吗?

编辑

这是一个屏幕显示，在未能正确映射后，在其中一个lineitem中显示"未定义"值。未定义的值

编辑# 2

这是一个屏幕截图，显示对象是水合的，没有被解析。对象存在，未解析

看到你在EDIT #2中发布的截图后

问题是您正在使用不同的属性名称访问foo的数据时，同时设置组件上的属性

从

<LineItem key={foo.ordHeaderId}
  accountManager={foo.accountManager}
  apptIconString={foo.apptIconString}

<LineItem key={foo.ordHeaderId}
  accountManager={foo.AccountManager}
...

应该能做到

这是使用属性名称从你的foo对象，而不是使用驼峰大小写或其他版本。

<ItemList>渲染中的if条件错误。应该是

if(this.state.items.length > 0)

其他的看起来都很好。但是，您忘记将key添加到<LineItem>组件

<LineItem key={foo.ordHeaderId}
 accountManager={foo.accountManager}
 ... />

在这里，您将key作为prop传递给<LineItem>组件，但是您忘记设置从prop到父元素的键。

var LineItem = React.createClass({
 render: function () {
    return (
        <div className="gridItem" key={this.props.key}>
            <div className="lessLineHeight smallFont">
        ....
     )
 }
})

这应该会删除错误/警告

根据我的经验，你不能将key作为prop元素传递。从LineItem中删除这个，看看它是否有效。让警告持续下去吧。你可以找出一种方法来删除警告，如果这工作以后。

<LineItem 
        accountManager={foo.accountManager}
        apptIconString={foo.apptIconString}
        commodityDescription={foo.commodityDescription}
        commodityId={foo.commodityId}
        dateCreated={foo.dateCreated}
        deliveryAppt={foo.deliveryAppt}
        destContact={foo.destContact}
        destinationAddress={foo.destinationAddress}
        destinationAddressName={foo.destinationAddressName}
        destinationCity={foo.destinationCity}
        earlyDeliveryTime={foo.earlyDeliveryTime}
        earlyPickupTime={foo.earlyPickupTime}
        equipmentName={foo.equipmentName}
        freightValue={foo.freightValue}
        handlingUnits={foo.handlingUnits}
        hazmatIconString={foo.hazmatIconString}
        highValueIconString={foo.highValueIconString}
        isHazmat={foo.isHazmat}
        isHighValue={foo.isHighValue}
        lateDeliveryTime={foo.lateDeliveryTime}
        latePickupTime={foo.latePickupTime}
        loadId={foo.loadId}
        loadNum={foo.loadNum}
        loadTmsStatus={foo.loadTmsStatus}
        ordHeaderId={foo.ordHeaderId}
        ordNum={foo.ordNum}
        orderType={foo.orderType}
        origContact={foo.originContact}
        originAddress={foo.originAddress}
        originAddressName={foo.originAddressName}
        originationCity={foo.originationCity}
        pickupAppt={foo.pickupAppt}
        pieces={foo.pieces}
        plannedEnd={foo.plannedEnd}
        plannedStart={foo.plannedStart}
        requiredTemp={foo.requiredTemp}
        specialInstructions={foo.specialInstructions}
        targetCost={foo.targetCost}
        teamId={foo.teamId}
        tempControlled={foo.tempControlled}
        tradingPartnerNameCNum={foo.tradingPartnerNameCNum}
        tradingPartnerName={foo.tradingPartnerNameClient}
        transportMode={foo.transportMode}
        user3gIdBookedBy={foo.user3gIdBookedBy}
        user3gIdCreatedBy={foo.user3gIdCreatedBy}
        weight={foo.weight} />

随机用户找到了答案，它包含在他的评论中。

问题的"关键"是没有将要映射的属性大写。不知道为什么它的工作方式是在Core MVC，但是，很明显，它不工作在MVC 4相同

相关内容

最新更新

热门标签：