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

Question

我想为 React-Native 生成 JSX，但我确实想使用 console.log().

检查每个 key/value

我追求的是：

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

但是抛出一个错误"Unexpected token"

如何在地图中调试我的值？

Answer 1

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

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

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

Answer 2

您可以使用逗号运算符：

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

评估语句然后丢弃它，或者您可以使用 ||运算符将评估 console.log 哪个 returns false 然后将 return 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]} />
  })}

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

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

How to console.log() this function?

javascript

jsx

reactjs

react-native