Javascript 我能'；我找不到这个react代码有什么问题，但是当尝试console.log该项时，我发现除注释字段外的所有内容都没有定义

我找不到这个react代码有什么问题，但是当尝试console.log该项时，除了note字段之外，所有字段都没有定义。我决定使用基于类的组件，希望是函数组件导致了错误，但类组件声明typeError firstName为null

这是功能组件和错误消息

Object
address: undefined
birthday: undefined
company: undefined
email: undefined
firstName: undefined
lastName: undefined
note: "d"
phone: undefined
socialProfile: undefined
url: undefined
__proto__: Object

---

我能得到一些aa代码的帮助吗，请让我的字母变成红色，当我试图重建项目时，上面写着。找不到符号

---

Items item=newitems（）

我将坚持使用功能组件。问题是您正在将电话簿对象更改为仅包含一个属性

我想你想要这样的东西：

  const handleChange = (e) => {
    setPhonebook((prevPhonebook) => ({
      ...prevPhonebook,
      [e.target.name]: e.target.value
    }));
  };

我不确定您以前是否见过，但这将允许您维护以前的值，并更新更改后的值

示例如下：

---

这个答案似乎与原始海报的问题无关。如果您有新问题，我建议您在查看这些有用的指南后发布新问题。祝你好运非常感谢，你是个救命恩人。我很感激。

class Phonebookform extends Component {

State = {
    firstName:'',
    lastName:'',
    company:'',
    phone:'',
    email:'',
    note:'',
    url:'',
    address:'',
    birthday:'',
    socialProfile:''
  }

   handleChange = (e) =>{
    this.setState({
      [e.target.name]:e.target.value
    })
    
  }

   handleSubmit = (e) =>{
    e.preventDefault()
    const item = {
      firstName: this.state.firstName,
      lastName: this.state.lastName,
      company: this.state.company,
      phone: this.state.phone,
      email: this.state.email,
      url: this.state.url,
      note: this.state.note,
      address: this.state.address,
      birthday: this.state.birthday,
      socialProfile: this.state.socialProfile
      
    }
    console.log(item)
    
  }
 render(){
  return (
    
    <Form id='form' onSubmit={this.handleSubmit} >
      <Form.Row>
    <Form.Group as={Col} >
      <Form.Label>First Name</Form.Label>
      <Form.Control name='firstName' value={this.state.firstName} onChange={this.handleChange} type="text" placeholder="First Name" />
    </Form.Group>
    <Form.Group as={Col} >
      <Form.Label>Last Name</Form.Label>
      <Form.Control name='lastName' value={this.state.lastName} onChange={this.handleChange} type="text" placeholder="Last Name" />
    </Form.Group>
    </Form.Row>
    <Form.Row>
    <Form.Group as={Col} >
      <Form.Label>Company</Form.Label>
      <Form.Control name='company' value={this.state.company} onChange={this.handleChange} type="text" placeholder="Company" />
    </Form.Group>
    <Form.Group as={Col} >
      <Form.Label>Phone</Form.Label>
      <Form.Control name='phone' value={this.state.phone} onChange={this.handleChange} type="text" placeholder="Phone" />
    </Form.Group>
    </Form.Row>
    <Form.Row>
    <Form.Group as={Col} >
      <Form.Label>Email</Form.Label>
      <Form.Control name='email' type="email" value={this.state.email} placeholder=" email" />
    </Form.Group>
    <Form.Group as={Col} >
      <Form.Label>Date</Form.Label>
      <Form.Control name='date' value={this.state.date} onChange={this.handleChange} type="text" placeholder="Date" />
    </Form.Group>
    </Form.Row>
    <Form.Row>
    <Form.Group as={Col} >
      <Form.Label>URL</Form.Label>
      <Form.Control value={this.state.url} onChange={this.handleChange} name='url' type="text" placeholder="URL" />
    </Form.Group>
    <Form.Group as={Col} >
      <Form.Label>Birthday</Form.Label>
      <Form.Control  name='birthday' value={this.state.birthday} onChange={this.handleChange} type="text" placeholder="Birthday" />
    </Form.Group>
    
    <Form.Group as={Col} >
      <Form.Label>Social </Form.Label>
      <Form.Control  name='socialProfile' value={this.state.socialProfile} onChange={this.handleChange} type="text" placeholder="Social Profile" />
    </Form.Group>
    </Form.Row>
    <Form.Group >
      <Form.Label>Note</Form.Label>
      <Form.Control as="textarea" name='note' value={this.state.note} onChange={this.handleChange}  rows={3} placeholder='Note'/>
    </Form.Group>
    
    
    <Button  id='form_btn' variant="primary"  type="submit">
      Submit
    </Button>
  </Form>
    )
 } 
 
}

export default Phonebookform

  const handleChange = (e) => {
    setPhonebook((prevPhonebook) => ({
      ...prevPhonebook,
      [e.target.name]: e.target.value
    }));
  };