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

Posted 2023-02-21

【中文标题】如何 console.log() 这个函数？

【英文标题】：How to console.log() this function?

【发布时间】：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) => ( 这不是你做箭头函数的方式。

【参考方案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] />
  );
)