reactJS數組數據不呈現

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

您可以嘗試危險地使用reactsSetInnerHTML屬性。 這將清除您要渲染的字符串。 不確定這是否是您的問題，但也許值得一試？

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

Answer 2

對不起，我浪費了大家的時間。 事實證明，我的渲染一直在工作。 我正在渲染一行文本（這是我期望的），但是由於某種原因，頁面向下滾動了一點，因此渲染的文本行不在頁面頂部。 我在標准標題中添加了內容，並能夠看到呈現的值