映射迭代器未定义 React.JS

Question

我正在尝试呈现一个列表，但是当我尝试在列表上进行映射时，我无法访问每个单独的元素，因为我 ReferenceError 说“e”未定义。我写对了吗？

  render() {
    return (
      <div>
         {console.log(Object.keys(this.props.emojis))} --> Returns the correct list
          Object.keys(this.props.emojis).map(e => (
              {console.log("EMOJI: ",e)}
              <Emoji emote={e} />
          ))
      </div>
    )
 }

Answer 1

这样写，就可以了：

render() {
    return (
      <div>
           {            
              Object.keys(this.props.emojis).map((e,i) => {
                 console.log("EMOJI: ",e);
                 return <Emoji key={i} emote={e}/>
              })
            }
      </div>
    )
 }

变化：

• 您已经在 map 函数中，因此无需将 {} 用于 console.log。

• 您正在使用() 和map 函数，而在() 内部使用的是2 语句，这是() 不允许的，如果您想进行一些计算，请始终使用{}，并返回里面的东西。

建议：在动态创建 ui 项时始终分配 key。

如果您需要任何帮助，请告诉我。

Answer 2

看看这是否适合你。

logging(e) {
    console.log("EMOJI: ", e);
}

render() {
   return (
     <div>
       Object.keys(this.props.emojis).map(e => (    
         this.logging(e);
         <Emoji emote={e} />
       ))
     </div>
   )
}