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

但是会抛出错误＆＃34;意外的令牌＆＃34;

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

Answer 1

您可以使用逗号运算符：

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

评估该语句然后将其丢弃，或者您可以使用||运算符将评估返回console.log的{{1}}，然后返回React元素：

false

但是，两者都相当hacky，我建议您将箭头功能转换为多行箭头，然后使用{Object.keys(this.state.types).map((obj) => console.log(obj) || ( <Item label={obj[TYPE]} value={obj[ID]} /> ))}：

return

在旁注 - 不要忘记在从阵列返回的对象上设置{Object.keys(this.state.types).map((obj) => { console.log(obj); return <Item label={obj[TYPE]} value={obj[ID]} /> })}属性，否则会导致性能下降和警告（您当前正在进行不这样做。）

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

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

2 个答案: