if else 在 map 函数中答案

【问题标题】：if else inside map functionif else 在 map 函数中
【发布时间】：2019-11-04 07:00:17
【问题描述】：

我遇到了一个错误：

无法读取未定义的属性“地图”

我的 JSON 数据：

{
    "data": [
        {
            "id": 1,
            "attention": 1
        },
        {
            "id": 2,
            "attention": 1
        },
        {
            "id": 3,
            "attention": 0
        }
    ]
}
_handleOutput() {
    var att = data.attention.map(function (data) {
      return data.attention
    });
}
console.log(att)

是否可以使用 if-else 将 JSON 输出数据与 React DOM 进行比较？像这样的：

if (data.attention === true || "1") {
    return <span>&#9989;</span>;
} else {
    return <span>&#10060;</span>;
}

然后我输出到表格列表<td>{this._handleOutput()}</td>

【问题讨论】：

当然你可以在闭包中使用控制结构。但是您的问题可能是条件data.attention === true || "1"。它没有按照你的想法做。你不能做这样的捷径。你必须写data.attention === true || data.attention === "1"或类似的东西......
data.attention 错误： 1. 这里没有定义data 变量。 2.你有一个带有property数据的对象，所以你必须做obj.data。 3.attention也不是数组的属性。
@android1751 在反应中你可以像这样定义stackoverflow.com/a/58688627/6544460

标签： javascript reactjs dictionary

【解决方案1】：

let obj = {
    data: [
        {
            id: 1,
            attention: 1
        },
        {
            id: 2,
            attention: 2
        },
        {
            id: 3,
            attention: 0
        }
    ]
}

在组件内部定义渲染函数

render(){
return (
    <div>
     {obj.data.map(a=>{
      if(a.attention===1) 
       return <span>&#9989;</span>

       return <span>&#10060;</span>;  
     })}
    </div> 
  )
  }

【讨论】：

【解决方案2】：

尝试解决方案中的错误

data.attention 不是数组。
直接检查值 1

解决方案

使用 Array.map 返回 jsx 元素的副本。
在遍历数组时使用destructuring 而不是写item.attention
检查值所以基本上我们可以使用三元检查（真？1：0），因为注意力的值是1或0，代表真或假，我们可以这样使用它。

需要改进的地方

您可以使用React fragments，而不是使用 div 包装

const jsonData = {
  "data": [{
      "id": 1,
      "attention": 1
    },
    {
      "id": 2,
      "attention": 1
    },
    {
      "id": 3,
      "attention": 0
    }
  ]
}

const App = () => {
    return ( <div> 
              {
                jsonData.data.map(({attention}) => {
                 return (
                 <div>
                    {
                      attention ? <span>&#9989;</span>
                      :
                      <span>&#10060;</span>
                    }
                   </div>
                 )
                })
              }
            </div>
          )
        }

ReactDOM.render(<App /> , document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

【讨论】：

【解决方案3】：

data 是 array，而不是 data.attention，因为这个 map 不起作用。 map 正在数组中工作。

【讨论】：

@AyushiKeshri 感谢您的建议。我总是尝试添加代码 sn-p 但这不能用于某些办公室工作。

【解决方案4】：

您正在尝试在数字字段上调用 map。它应该是data.map。

【讨论】：

【解决方案5】：

数据是你的数组而不是 data.attention。所以像这样使用：

 {
        "data": [
            {
                "id": 1,
                "attention": 1
            },
            {
                "id": 2,
                "attention": 2
            },
            {
                "id": 3,
                "attention": 0
            }
        ]
    }

    var att = data.map(function (data) {
      return data.attention
    });
    console.log(att)

【讨论】：

【解决方案6】：

var data = [
    {
        "id": 1,
        "attention": 1
    },
    {
        "id": 2,
        "attention": 2
    },
    {
        "id": 3,
        "attention": 0
    }
]

var att = data.map(data => {
  console.log(data);

  if (data.attention === 1) {
    return '<span>&#9989;</span>';
  } else {
    return 'Not Fount';
  }
});

console.log(att);

【讨论】：