0

我正在尝试从表单字段数组构建表单，其中每个表单字段如下所示：

{
   "name": "state",
   "resource": "customer",
   "type": "TextBox",
   "assetId": "State",
   "label": {
       "text": "State",
       "assetId": "Label"
   }
}

但是，当我尝试使用 JSX 对其进行映射时，如果我访问对象的某些属性，则字段不会成功显示。采取以下代码，它可以正常工作：

formfields.map(function (formfield, i) {
    var returnfield = <div key={i}>{formfield.name}</div>;
    switch (formfield.type) {
        case "TextBox":
            console.log(formfield.label);
            returnfield = (
                <div key={i}>
                    <label htmlFor="theinput">{formfield.name}</label>
                    <input id="theinput" type="text" value={formfield.name} />
                </div>
            );
            break;
    }
    return returnfield;
});

并将其与失败的代码进行比较：

formfields.map(function (formfield, i) {
    var returnfield = <div key={i}>{formfield.name}</div>;
    switch (formfield.type) {
        case "TextBox":
            console.log(formfield.label.text);
            returnfield = (
                <div key={i}>
                    <label htmlFor="theinput">{formfield.name}</label>
                    <input id="theinput" type="text" value={formfield.name} />
                </div>
            );
            break;
    }
    return returnfield;
});

精明的观察者会注意到两者之间的唯一区别是，在第二个中，我们记录的是formfield.label.text而不是 formfield.label

我完全不明白为什么简单地记录一个对象的孙子属性会导致表单显示为空（即，没有字段）。也许我遇到了保留名称或其他什么？任何想法表示赞赏。

4

1 回答 1

2

为什么我在开发者控制台中没有看到 javascript 错误？.map() 不允许引发错误是否有一些奇怪的事情？

在认识到在您的项目中需要检查 null 之后，我建议您使用一些 javascript 函数式编程的概念来编写一个函数，该函数在将错误值应用到您的逻辑之前检查它们。

您可以使用Maybe函子，它返回一个立即停止的 Maybe(null)。在将空值返回到您的逻辑并引起轰动之前！

您也可以使用Either，这很酷，因为它就像可能一样，但如果值错误，您也可以给出一些逻辑来运行。

对于这些建议，我有两个示例（从 jsbin 复制） 

    //Key container == Something map can iterate over like an object or an array.
    //And am talking about the lodash / ramda.js curried map that can iterate over object not the   js native one.

    //Using Maybe
    //Url http://jsbin.com/yumog/edit?js,console

    var safeGet = _.curry(function(x,o){ 
      return Maybe(o[x]); 
      //This will return Maybe(null) 
    //if it's some property in a container is not found 
    //which you can check before breaking something
    });

    var user = {id: 2, name: "Albert"}
    
    var ex3 = compose(map(_.head), safeGet('name'));


    assertDeepEqual(Maybe('A'), ex3(user))
    console.log("exercise 3...ok!")



    //Using Either.io

    //url http://output.jsbin.com/bexuc/

    // Write a function that uses checkActive() 
    //and showWelcome() to grant access or return the error
    
    var showWelcome = compose(_.add( "Welcome "), _.get('name'))

    //Here either returns a function you give it on the right if it's truthy 
    //and left if it's falsey (or falsy i don't know english .. )
    // So you get to do something if the property in your container is not present.

    var checkActive = function(user) {
     return user.active ? Right(user) : Left('Your account is not active')
    }

    var ex1 = compose(map(showWelcome), checkActive);

    assertDeepEqual(Left('Your account is not active'), ex1({active: false, name: 'Gary'}))
    assertDeepEqual(Right('Welcome Theresa'), ex1({active: true, name: 'Theresa'}))

图书馆的链接。也许：https ://github.com/chrissrogers/maybe

要么：https ://github.com/fantasyland/fantasy-eithers

您可能还需要查看 lodash / ramda 以全面了解这些功能概念。

于 2016-02-29T18:37:53.857 回答