映射迭代器undefined React.JS

我试图呈现一个列表，但是当我试图映射列表时，我无法访问每个单独的元素，因为我ReferenceError说'e'是未定义的。我正确地写这篇文章吗？映射迭代器undefined React.JS

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

来源

2017-02-03 Darkzuh

写这样的，它的工作：

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。

让我知道你是否需要任何帮助。

来源

2017-02-03 07:27:55

我仍然得到e未定义的错误，现在返回语句不允许webpack构建。我在那里得到一个意外的令牌错误：/ – Darkzuh

这部分是ohk，希望看到代码的其他部分，你可以在pastebin或任何其他地方显示？ –

是的，我刚刚测试了代码，我错了。上面的代码只能防止错误，但现在日志不会显示。这是我的pastebin。感谢http://pastebin.com/eauDrjGw – Darkzuh

看看这个工作适合你。

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

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

来源

2017-02-03 07:36:45 PSo

是的，欢呼声。为什么我们在地图中使用圆括号而不是大括号？我认为箭头函数需要花括号来表示一个匿名函数 – Darkzuh

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

花括号意味着你正在使用状态变量或道具变量，双重卷曲意味着你忽略了所有并将其视为正常的JS。 – PSo

映射迭代器undefined React.JS

回答

相关问题