Question

不确定我的代码有什么问题但是我无法在对象键循环中得到一个简单的div来渲染。我知道它循环通过它11次因为我已经放入一个控制台日志并输出一个console.log 7次，但是，div根本不会渲染。任何想法：

class BookingView extends React.Component {
render () {
  const {color, booking} = this.props
  return (
    <div>
      <BookingHeader booking={booking} color={color}/>
      {Object.keys(booking).forEach(function(key,index) {
        <div>this is a test</div>
      })}
    </div>
  )
}
}

Answer 1

因为#array.forEach返回undefined，使用#array.map从回调函数返回自定义元素，最后map将返回所有元素的数组。

像这样写：

{
    Object.keys(booking).map((key,index)  => <div key={key}>this is a test</div>)
}

还为每个动态生成的元素添加key。

Answer 2

forEach返回undefined，React无法渲染。

你可能想要

使用map和
从回调中返回一些内容

例如，使用箭头函数（简洁形式具有隐式return）：

class BookingView extends React.Component {
  render () {
    const {color, booking} = this.props
    return (
      <div>
        <BookingHeader booking={booking} color={color}/>
        {Object.keys(booking).map(key => <div key={key}>this is a test</div>)}
      </div>
    )
  }
}

（注意我添加了key属性，因为在呈现列表时您需要这样做。）

或带有明确返回的详细箭头：

class BookingView extends React.Component {
  render () {
    const {color, booking} = this.props
    return (
      <div>
        <BookingHeader booking={booking} color={color}/>
        {Object.keys(booking).map(key => {
          return <div key={key}>this is a test</div>;
        })}
      </div>
    )
  }
}

...或问题中的function函数：

class BookingView extends React.Component {
  render () {
    const {color, booking} = this.props
    return (
      <div>
        <BookingHeader booking={booking} color={color}/>
        {Object.keys(booking).map(function(key) {
          return <div key={key}>this is a test</div>;
        })}
      </div>
    )
  }
}

Answer 3

forEach不会返回任何数组。请使用map代替此

{Object.keys(booking).map(function(key,index) {
   return (<div key={key}>this is a test</div>)
})}

对象键循环不在React中呈现

3 个答案: