如何在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]} />
      ))}

它会评估该语句然后将其丢弃,或者您可以使用|| 运算符将评估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在从数组返回的对象上设置属性,否则会导致性能下降和警告(您当前没有这样做).

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