Question

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

{
   "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

我完全难以理解为什么简单地记录对象的孙子属性会导致表单显示为空（即没有字段）。也许我遇到了保留的名字或什么？任何想法都赞赏。

Answer 1

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

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

您可以使用可能仿函数返回可立即停止的Maybe（null）。在将空值返回到逻辑并导致繁荣之前！

你也可以使用要么，这很酷，因为它很可能，但如果值是错误的话，你也可以运行一些逻辑来运行。

我有两个这些建议的例子（从jsbin复制）

＆＃13;

    //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'}))

＆＃13;

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

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

您可能还需要检查lodash / ramda以充分了解这些功能概念。

如果访问某些属性，则React JSX表单字段映射失败

1 个答案: