Question

我遇到一个错误：

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

我的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>

Answer 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> 
  )
  }

Answer 2

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

Answer 3

您正在尝试在数字字段上拨打地图。应该改为data.map。

Answer 4

数据是您的数组，而不是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)

Answer 5

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);

Answer 6

错误的解决方案

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

解决方案

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

需要改进的提示

您可以使用React fragments

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>

如果在地图功能内

6 个答案: