如何在控制台打印object对象？React代码提交后无输出是什么问题

开发者阿泽

2026-9-27

错误原因及修复方案

核心错误点

初始化state时缺失selectedValue字段：你在handleChange中操作的selectedValue没有在constructor的state中声明初始值，导致下拉选择逻辑初始状态异常。
字段名拼写错误：state中声明的长度字段是lenght（拼写错误），但Furniture对应的表单中输入框name属性是正确的length，二者不匹配导致长度值无法正确存入state。
onChangeAttribute逻辑冗余：你重复写了5次相同的赋值逻辑，实际只需要保留1次即可，重复赋值无实际作用。
onSubmit中构造对象的逻辑完全错误：e.target指向触发点击事件的ADD按钮，你没有给按钮设置name属性，所以[e.target.name]的值为undefined，重复5次赋值后最终obj只会保留最后一个undefined键对应的值，不会输出你想要的所有字段。
冗余方法：onChangeType方法在全代码中没有被调用，属于无效代码。

修复后的核心代码示例

修正state初始化

// constructor中的state修改为
this.state= {
  selectedValue: '0', // 新增初始值，对应下拉框默认选中的Select选项
  type: '',
  book:'',
  size: '',
  height: '',
  width: '',
  length: '' // 修正拼写错误
}

修正onChangeAttribute方法

onChangeAttribute(e) {
  this.setState({
    [e.target.name]: e.target.value
  })
}

修正onSubmit方法

onSubmit(e) {
  e.preventDefault();
  // 直接读取state中已存储的字段构造对象即可
  const obj = {
    type: this.state.selectedValue,
    book: this.state.book,
    size: this.state.size,
    height: this.state.height,
    width: this.state.width,
    length: this.state.length
  }
  console.log(obj);
}