ReactJS 不通过映射绑定到状态值

Question

我正在处理一个 MVC5 项目，运行遇到 React 未绑定数组的问题。我在一个 MVC Core 项目中有这个工作，但不得不 "regress" 回到旧结构。最大的变化似乎是在控制器中，对于 ajax 调用中的 return 类型，从 JsonResult (Core MVC) 更改为 Json (MVC5)。

这是 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')
);

正如您从图像中看到的那样，渲染：在 loadData 函数中看到从 ajax 调用返回的项目，然后将它们设置为状态，但是当需要映射它们时，它什么都不做。

对我没有看到的内容有什么想法吗？

编辑

这是一个屏幕显示，显示了未能正确映射后其中一个 LineItem 中的 'undefined' 值。 undefined values

编辑#2

这是一张显示对象被水化但未被解析的屏幕截图。 object present, not parsed

Answer 1

<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">
        ....
     )
 }
})

这应该删除 error/warning

Answer 2

根据我的经验，您不能将 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} />

Answer 3

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

问题的 "key" 没有将要映射的属性大写。不确定为什么它以在 Core MVC 中的方式工作，但显然，它在 MVC 4 中的工作方式不同。

Answer 4

看到您在 编辑 #2

中发布的屏幕截图后

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

所以从

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

到

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

应该可以解决问题

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

ReactJS 不通过映射绑定到状态值

ReactJS not binding via map to state values

asp.net-mvc

reactjs

react-jsx

reactjs.net