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

时间：2016-09-15 15:53:57

标签： asp.net-mvc reactjs react-jsx reactjs.net

我正在使用MVC5项目并遇到React没有绑定数组的问题。我有一个在MVC核心项目中工作，但不得不“回归”到旧结构。最大的变化似乎是在控制器中，从JsonResult（Core MVC）变为Json（MVC5），用于ajax调用的返回类型。

以下是Chrome开发者工具的输出： （由于缺乏声誉点而被删除）

而且，我的.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')
);

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

关于我没有看到的任何想法？

修改

这是一个屏幕显示，显示无法正确映射后其中一个LineItem中的“未定义”值。 undefined values

编辑＃2

这是一个屏幕截图，显示对象是水合的，而不是被解析。 object present, not parsed

4 个答案:

答案 0 :(得分：0)

instance Functor SubsM where -- fmap f cf = SubsM $ \c -> second (first f) ((runSubsM cf) c) -- fmap f cf = SubsM $ \c -> second (first f) . (runSubsM cf) $ c -- fmap f cf = SubsM $ second (first f) . (runSubsM cf) -- One more function composition allows us to drop cf as an -- explicit argument fmap f = SubsM . second (first f) . runSubsM 渲染中的if条件错误。它应该像

<ItemList>

其他一切看起来都不错。但是，您忘记将if(this.state.items.length > 0)添加到key组件

<LineItem>

在这里，您将<LineItem key={foo.ordHeaderId} accountManager={foo.accountManager} ... /> 作为key传递给prop组件，但您忘记将该键从道具设置为父元素。

<LineItem>

这应该删除错误/警告

答案 1 :(得分：0)

根据我的经验，你不能将密钥作为道具元素传递。从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} />

答案 2 :(得分：0)

随机用户找到答案并将其包含在评论中。

＆＃34; key＆＃34;问题是没有大写要映射的属性。不知道为什么它的工作方式与Core MVC相同，但显然，它在MVC 4中的工作方式并不相同。

答案 3 :(得分：0)

在看到您在编辑＃2

中发布的屏幕截图后

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

从

改变它 
<LineItem key={foo.ordHeaderId}
  accountManager={foo.accountManager}
  apptIconString={foo.apptIconString}

到

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

应该做的伎俩

使用 foo 对象中的确切属性名称，而不是使用驼峰或其他版本。

相关问题
最新问题