Question

我有填充对象数组的代码。代码如下：

renderMultiplePEO = () => {

    let currentComponent = this;

    var localData = {
        redirect: true,
        familyID: "",
        planID: "",
        location: '',
        memberID: "",
        PIN: ""
    }

    localData = currentComponent.state.passData;
    var PEOCount = localData.location;
    var PEOList = currentComponent.state.PEOList;

    var locationArray = [];
    var displacement = -56;

    for (var counter=0;counter<PEOCount;counter++) {
        var locationObject = {
            counter: 0,
            location: '',
            locationStatus: '',
            locationName: ''
        }
        displacement=displacement+56;
        locationObject.location = PEOList.substr(displacement+10,5);
        locationObject.locationStatus = PEOList.substr(displacement+15,1);
        locationObject.locationName = PEOList.substr(displacement+16,40);
        if (locationObject.locationStatus == "A") {
            locationObject.counter = counter + 1;
            locationArray[counter] = locationObject;
        }
    }

    console.log("location array 0: ", locationArray[0]);
    console.log("location array 1: ", locationArray[1]);
    console.log("location array 2: ", locationArray[2]);

    return ( locationArray.map( item => (
        <div className="FullBackground">   
            <div className="container">
                <div className="row">
                    <div className="col-12 text-left text_14">
                        <label id="lblName">{item.location} - {item.locationName}</label>
                    </div>
                </div> 
            </div>      
        </div>
    )))
}

currentComponent.state.passData.location的值为2

currentComponent.state.PEOList的值为

855100001 00001AApple Inc. 1                            855100001900003AGoogle Inc. 3

使用以下代码从常规render（）部分调用

renderMultiplePEO：

render() {
    if (this.state.passData.redirect === "Multiple PEO") {  
        var PEOCount = this.state.passData.location;
        return (
            <div className="FullBackground">   
                <div className="container">
                    <div className="row">
                        <div className="col-12 text-left text_16">
                            <label>We see that you are participating in {PEOCount} locations. Please select the location you would like to access.</label>
                        </div>
                    </div>  
                </div>  
                <div>
                    {this.renderMultiplePEO()} 
                </div>    
            </div>
        )
    }
}

当我运行应用程序时，这是控制台和输出窗口生成的内容：

当您查看控制台时，可以看到我正在用数据填充locationArray [0]和locationArray 1。

我的问题是为什么地图功能只渲染locationArray的1个元素？

谢谢您的帮助！

Answer 1

您在哪里打电话给renderMultiplePEO？对我来说，您似乎想信任它的隐式绑定，但是实际上您使用的是一个箭头函数，它可以为您完成绑定，并且您不能更改或修改

具有地图功能的ReactJS不会显示所有数组元素

1 个答案: