在地圖函數不返回的情況下反應無狀態組件

Question

我有一個如下所示的無狀態組件表單助手：

import React from 'react';

export default(props) => {
    var { attr, fieldAttribute } = props;
    var label = attr.label;
    var val = fieldAttribute.value;
    var keys = [];

    if( typeof val === 'object' ){
        keys = Object.keys( val );
    }

    return (
        <div className="form-group">
            <label className="col-sm-2 control-label">{label}</label>
            <div className="col-sm-10">
                {(() => {
                    if( typeof val === 'object' ){
                        keys.map(function(k){
                            return (
                                <p className="form-control-static"><span className="label label-default label-fixed">{k}</span> {val[k]}</p>
                            )
                        });
                    }
                    else{
                        return (
                            <p className="form-control-static">{val}</p>
                        )
                    }
                })()}
            </div>
        </div>
    )
}

“ val”中的數據是字符串或json對象（已驗證）。 我的問題是keys.map（）...出於某種原因未返回任何內容。

在這種情況下，“ val”中的數據如下所示：

{
    foo: 'some value of foo',
    bar: 'some value of bar
}

我嘗試了許多不同的方法來迭代“ val”以至於沒有成功。 我在這里想念什么？

謝謝。

Answer 1

嘗試在keys.map之前添加return語句，因為您需要從function。返回結果，而沒有return函數返回undefined ，這就是為什么您無法獲得任何結果的原因

return keys.map(function(k){
   ..
});