映射迭代器未定义 React.JS

Posted 2023-02-22

【中文标题】映射迭代器未定义 React.JS

【英文标题】：Map iterator undefined React.JS

【发布时间】：2017-06-20 12:11:10

【问题描述】：

我正在尝试呈现一个列表，但是当我尝试在列表上进行映射时，我无法访问每个单独的元素，因为我 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>
    )
 

【参考方案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。

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

【讨论】：

我仍然得到 e is not defined 错误，现在返回语句不允许 webpack 构建。我在那里收到一个意外的令牌错误：/

这部分没问题，想看其他部分的代码，能不能在pastebin或者其他地方展示一下？？

是的，所以我刚刚测试了代码，但我弄错了。上面的代码只能防止错误，但现在日志不会显示。这是我的粘贴箱。谢谢pastebin.com/eauDrjGw

使用准确的代码，像这样：()=>，这肯定会起作用，我确信 :) 在你的 pastebin 中你像这样使用它：()=>()。通过 更改它会起作用。做了一个小改动，使用更新后的代码。

谢谢：D。我以为我最初是这样做的，但我想我没有。那是我最初的方法，但我可能在某个地方犯了一些错误。干杯：D

【参考方案2】：

看看这是否适合你。

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


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

【讨论】：

是的，干杯。为什么我们在地图中使用括号而不是花括号？我认为箭头函数需要花括号来表示匿名函数

在我的控制台地图中，像 x.map(e => asiofn) 这样的花括号工作得很好，我不知道为什么我们使用 JSX 时会有区别

花括号表示你正在使用状态变量或道具变量，双花括号表示你忽略所有并将其视为普通JS。

嗯，两件事。首先，为什么它对括号起作用？你没有提到它。其次，如果双花括号起作用，那么为什么 Object.keys(this.props.emojis).map((e,i) => console.log(e) ) 不起作用？谢谢

这是 React，所有花括号都被视为变量或 javascript，但不是原生 JS，在原生 JS 中，总是使用花括号表示 map，因为它代表块语句或对象声明.