如何 console.log() 这个函数？答案

【问题标题】：How to console.log() this function?如何 console.log() 这个函数？
【发布时间】：2017-05-22 20:47:54
【问题描述】：

我想为 React-Native 生成 JSX，但我确实想使用 console.log() 检查每个键/值。

我追求的是什么：

{Object.keys(this.state.types).map((obj) => (
          console.log(obj); <-- This guy
          <Item label={obj[TYPE]} value={obj[ID]} />
          ))}

但是抛出一个错误“Unexpected token”

我怎样才能在地图中调试我的值？

【问题讨论】：

(obj) => ( 这不是你做箭头函数的方式。

标签： javascript reactjs react-native jsx

【解决方案1】：

您可以使用逗号运算符：

 {Object.keys(this.state.types).map((obj) => (
      console.log(obj), <-- This guy
      <Item label={obj[TYPE]} value={obj[ID]} />
      ))}

评估语句然后丢弃它，或者您可以使用 ||运算符将评估 console.log，它返回 false，然后将返回 React 元素：

 {Object.keys(this.state.types).map((obj) => console.log(obj) || (

      <Item label={obj[TYPE]} value={obj[ID]} />
      ))}

但是，两者都相当 hacky，我建议您将箭头函数转换为多行箭头，然后使用 return：

 {Object.keys(this.state.types).map((obj) => { 
      console.log(obj);
      return <Item label={obj[TYPE]} value={obj[ID]} />
  })}

附带说明 - 不要忘记为从数组返回的对象设置 key 属性，否则您会收到性能下降和警告（您目前没有这样做）。

【讨论】：

【解决方案2】：

=> ( 中的圆括号告诉函数它正在返回一个对象（JSX 被转译成一个 JS 对象）。您希望函数体运行 console.log()，然后返回 <Item> 元素。

将圆括号转换为大括号，并添加return语句：

{Object.keys(this.state.types).map((obj) => {
  console.log(obj); <-- This guy
  return (
    <Item label={obj[TYPE]} value={obj[ID]} />
  );
})}

【讨论】：