Question

我在reactJS应用程序中具有以下代码来呈现一些简单数据：

    console.log("idArray: ", idArray);
    return idArray.map( item => (
        <div>
            <div className="row">
                <div className="col-12 text-left text_14">
                    <label> {item.fromFundName}</label>
                </div>
            </div>
        </div>
    ))

这是呈现的内容，并且在console.log（）中显示的内容：

这时，我只是试图显示fromFundName。知道为什么什么都不渲染吗？

这是我渲染的代码（为此运行，this.state.transferState = 4和this.state.indicative.functionUpdate = false）：

render() {
    var transferState = this.state.transferState;

    if (this.state.indicative.functionUpdate == true) {      
        return ( 
            <Redirect to={{
                pathname: "/home",
                state: {
                    planName: this.state.passData.planName,
                    familyID: this.state.passData.familyID,
                    planID: this.state.passData.planID,
                    loc: this.state.passData.loc,
                    memberID: this.state.passData.memberID,
                    PIN: this.state.passData.PIN,
                    returnCode: "Your transfer request has been cancelled",
                    returnMessage: 'no fetch',
                    mqMessage: this.state.passData.mqMessage,
                    planMenuString: this.state.passData.planMenuString
                }
            }}/>
        )
    } 
    if (this.state.indicative.functionUpdate == "Cancel") {
        return ( 
            <Redirect to={{
                pathname: "/home",
                state: {
                    planName: this.state.passData.planName,
                    familyID: this.state.passData.familyID,
                    planID: this.state.passData.planID,
                    loc: this.state.passData.loc,
                    memberID: this.state.passData.memberID,
                    PIN: this.state.passData.PIN,
                    returnCode: "Your specific fund transfer has been cancelled",
                    returnMessage: 'no fetch',
                    mqMessage: this.state.passData.mqMessage,
                    planMenuString: this.state.passData.planMenuString
                    }
                }}/>
            )
    }

    if (transferState == "1") {
        return (
            <div>                    
                {this.renderSolicitFromFund()}
            </div>
        )
    }

    if (transferState == "2") {
        return (
            <div>               
                {this.renderSolicitFromPercent()}
            </div>
        )
    }

    if (transferState == "3") {
        return (
            <div>               
                {this.renderIntoFundAndPercent()}
            </div>
        )
    }

    if (transferState == "4") {
        return (
            <div>               
                {this.renderSolicitAnotherOrProcess()}
            </div>
        )
    }

    return (
        <div>
            {this.renderDefault()}
        </div>
    )
}
}

这是renderSolicitAnotherOrProcess（）中的代码：

renderSolicitAnotherOrProcess = () => {

    let currentComponent = this;  
    var localNumberOfFunds = currentComponent.state.numberOfFunds;

    var localData = {
        inv_FundAccurecordFundNumber: [],
        inv_FundMsgNumber: [],
        inv_FundName: [],
        inv_FundBalance: [],
        inv_FundAllocation: [],
        inv_FundPercent: [],
        inv_FundMinPct: [],
        inv_FundMaxPct: [],
        inv_FundTrsfInAllowed: [],
        inv_FundTrsfOutAllowed: [],
        stored_transfer: []
    }
    localData = currentComponent.state.data;
    var numberOfStoredTransfers = localData.stored_transfer.length;
    var trsfIndex = -1;
    var idArray = [];

    for (var l=0;l<numberOfStoredTransfers;l++) {
        var idObject = {
            fromFundNumber: 0,
            fromFundName: "",
            fromFundPercent: 0,
            intoFundNumber: [],
            intoFundName: [],
            intoFundPercent: []
        }
        var localCurrentTransfer = {
            fromFundNumber: 0,
            fromFundName: "",
            fromFundPercent: 0,
            intoFundNumber: [],
            intoFundName: [],
            intoFundPercent: []
            }
        localCurrentTransfer = localData.stored_transfer[l];
        idObject.fromFundNumber = localCurrentTransfer.fromFundNumber;
        idObject.fromFundName = localCurrentTransfer.fromFundName;
        idObject.fromFundPercent = localCurrentTransfer.fromFundPercent;
        for (var index=0;index<localNumberOfFunds;index++) {
            if (localCurrentTransfer.intoFundPercent[index]>0) {
                trsfIndex++;
                idObject.intoFundNumber[trsfIndex] = localCurrentTransfer.intoFundNumber[index];
                idObject.intoFundName[trsfIndex] = localCurrentTransfer.intoFundName[index];
                idObject.intoFundPercent[trsfIndex] = formatPercent(localCurrentTransfer.intoFundPercent[index]);
            }
        }
        idArray.push(idObject);
    }
    console.log("idArray: ", idArray);
    return idArray.map( item => (
        <div>
            <div className="row">
                <div className="col-12 text-left text_14">
                    <label> {item.fromFundName}</label>
                </div>
            </div>
        </div>
    ))
}

Answer 1

您可以尝试使用reacts dangerouslySetInnerHTML道具。这将清除您要渲染的字符串。不确定这是否是您的问题，但也许值得一试？

   <label dangerouslySetInnerHTML={{__html: item.fromFundName}} />

Answer 2

对不起，我浪费了大家的时间。事实证明，我的渲染一直在工作。我正在渲染一行文本（这是我期望的），但是由于某种原因，页面向下滚动了一点，因此渲染的文本行不在页面顶部。我在标准标题中添加了内容，并能够看到呈现的值

reactJS数组数据不呈现

2 个答案: