Question

我有这些（从我能看到的）几乎完全相同的方式来做我想要的，但object.keys方式并没有在我的浏览器中显示任何内容。

第一种方式：

{this.state.months.map((month, index) => {
  for (var key in month) {
    if (month.hasOwnProperty(key)) {
      return <div key={index} className="match">
            <input className="toggle" type="checkbox" />
            <label htmlFor="toggle">{month[key].month}</label>
            <div className="expand">
              {month[key].p1.name} {month[key].p1.score} {month[key].p2.name} {month[key].p2.score}
            </div>
          </div>
    }
  }
})}

第二种方式：

{this.state.months.map((month, index) => {
  for (var key in month) {
    Object.keys(month).forEach((mnth)=>{
      console.log(month, 'm1');
      console.log(mnth, 'm2');
      return <div key={index} className="match">
        <input className="toggle" type="checkbox" />
        <label htmlFor="toggle">{month[mnth].month}</label>
        <div className="expand">
          {month[mnth].p1.name} {month[mnth].p1.score} {month[mnth].p2.name} {month[mnth].p2.score}
        </div>
      </div>
    })
  }
})}

我想使用object.keys的原因是因为它允许我遍历多个对象属性。第一种方法只显示每个对象的第一个键

当我在console.log（month[mnth]）时，我得到了我想要的东西。服务器控制台或浏览器控制台中也没有错误。任何想法为什么它不会渲染？我不改变任何其他东西并且始终不会渲染任何东西

Answer 1

我认为你只是使用模板ES6字符串。像这样包装您的打印元素

`${month[mnth].p1.name}` `${month[mnth].p1.score} ` `${month[mnth].p2.name} ` `${month[mnth].p2.score}`

您还需要返回元素。

Answer 2

您可以删除外部for循环，只需使用map迭代键即可。

{this.state.months.map((month, index) => {
  Object.keys(month).map((mnth, mnthIndex)=>{
    console.log(month, 'm1');
    console.log(mnth, 'm2');
    return (<div key={`${index}-${mnthIndex}`} className="match">
      <input className="toggle" type="checkbox" />
      <label htmlFor="toggle">{month[mnth].month}</label>
      <div className="expand">
        {`${month[mnth].p1.name} ${month[mnth].p1.score} ${month[mnth].p2.name} ${month[mnth].p2.score}`}
      </div>
    </div>)
  })
})}

另外，观察组合的使用，如果第二次迭代中的索引是关键，以避免类似的键。这也可能是浏览器中没有任何内容呈现的原因。

对象键没有显示任何反应

2 个答案: