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个语句，()不允许使用{}，如果您愿意某些计算总是使用key，并在其中返回一些内容。

建议：在动态创建ui项目时始终指定{{1}}。

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

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

映射迭代器undefined React.JS

2 个答案: