如何在console.log（）这个函数？

Question

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

我所追求的是：

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

但是错误被抛出“意外的令牌”

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

Answer 1

您可以使用逗号运算符：

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

它会评估该语句然后将其丢弃，或者您可以使用|| 运算符将评估返回false console.log ，然后返回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属性，否则会导致性能下降和警告（您当前没有这样做）。

Answer 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]} />
  );
})}