新手求助：Localhost页面无报错不渲染及React动态表单开发

1. 页面无法渲染的核心修复 #

App.js中组件继承类名拼写错误，React类组件需继承Component（单数），而非Components（复数），同时导入语句也要对应修正：

// App.js 开头修改
import React, { Component } from "react";

class App extends Component {
  // ... 剩余代码
}

2. 酒店静态字段的状态更新修复 #

当前onChange方法仅处理联系人字段更新，酒店字段传入index=-1时无对应逻辑，需补充：

onChange = (e, index) => {
  const { name, value } = e.target;
  // 处理酒店静态字段
  if (index === -1) {
    this.setState({ [name]: value });
    console.log(`酒店${name}更新为:`, value);
    return;
  }
  // 处理联系人动态字段
  this.setState((prevState) => {
    const contacts = [...prevState.contacts];
    contacts[index] = { ...contacts[index], [name]: value };
    console.log(`第${index+1}位联系人更新:`, contacts[index]);
    return { contacts };
  });
};

3. 提交时关联酒店与联系人数据 #

修改onSubmit方法，提交时打印完整表单数据（包含酒店信息和所有联系人），方便调试：

onSubmit = (e) => {
  e.preventDefault();
  // 组装完整表单数据
  const formData = {
    hotelName: this.state.hotelName,
    hotelCity: this.state.hotelCity,
    hotelCategory: this.state.hotelCategory,
    hotelRating: this.state.hotelRating,
    contacts: this.state.contacts
  };
  console.log("提交的完整表单数据:", formData);
  // 重置表单状态
  this.setState({
    hotelName: "",
    hotelCity: "",
    hotelCategory: "",
    hotelRating: "",
    contacts: [{ name: "", email: "", phone: "" }],
  });
};

4. 修复酒店Rating字段的name属性 #

表单中酒店Rating的inputname拼写错误，需和state中的hotelRating保持一致：

// App.js 中酒店Rating的input修改
<input
  type="text"
  value={hotelRating}
  name="hotelRating" // 原先是hotelrating，改为驼峰式
  onChange={(e) => this.onChange(e, -1)}
/>

5. 完善添加联系人按钮的可读性 #

给添加联系人按钮添加文字，明确功能：

<button onClick={this.addContactField}>+ 添加联系人</button>

完整修复后的App.js代码 #

import React, { Component } from "react";

class App extends Component {
  state = {
    hotelName: "",
    hotelCity: "",
    hotelCategory: "",
    hotelRating: "",
    contacts: [{ name: "", email: "", phone: "" }],
  };

  onChange = (e, index) => {
    const { name, value } = e.target;
    // 处理酒店静态字段
    if (index === -1) {
      this.setState({ [name]: value });
      console.log(`酒店${name}更新为:`, value);
      return;
    }
    // 处理联系人动态字段
    this.setState((prevState) => {
      const contacts = [...prevState.contacts];
      contacts[index] = { ...contacts[index], [name]: value };
      console.log(`第${index+1}位联系人更新:`, contacts[index]);
      return { contacts };
    });
  };

  onSubmit = (e) => {
    e.preventDefault();
    const formData = {
      hotelName: this.state.hotelName,
      hotelCity: this.state.hotelCity,
      hotelCategory: this.state.hotelCategory,
      hotelRating: this.state.hotelRating,
      contacts: this.state.contacts
    };
    console.log("提交的完整表单数据:", formData);
    this.setState({
      hotelName: "",
      hotelCity: "",
      hotelCategory: "",
      hotelRating: "",
      contacts: [{ name: "", email: "", phone: "" }],
    });
  };

  addContactField = () => {
    this.setState((prevState) => ({
      contacts: [...prevState.contacts, { name: "", phone: "", email: "" }],
    }));
    console.log("新增联系人字段，当前联系人数:", this.state.contacts.length + 1);
  };

  render() {
    const { hotelName, hotelCity, hotelCategory, hotelRating, contacts } =
      this.state;
    return (
      <div>
        <form onSubmit={this.onSubmit}>
          <div>
            <h2>酒店信息</h2>
            <label>酒店名称 </label>
            <input
              type="text"
              value={hotelName}
              name="hotelName"
              onChange={(e) => this.onChange(e, -1)}
            />
            <label>所在城市</label>
            <input
              type="text"
              value={hotelCity}
              name="hotelCity"
              onChange={(e) => this.onChange(e, -1)}
            />
            <label> 酒店评分</label>
            <input
              type="text"
              value={hotelRating}
              name="hotelRating"
              onChange={(e) => this.onChange(e, -1)}
            />
            <label>酒店类别</label>
            <input
              type="text"
              value={hotelCategory}
              name="hotelCategory"
              onChange={(e) => this.onChange(e, -1)}
            />
          </div>
          <br></br>

          <h2>联系人信息</h2>
          {contacts.map((contact, index) => (
            <div key={index}>
              <input
                type="text"
                value={contact.name}
                placeholder="姓名"
                name="name"
                onChange={(e) => this.onChange(e, index)}
              />
              <input
                type="email" // 改为email类型，更规范
                value={contact.email}
                placeholder="邮箱"
                name="email"
                onChange={(e) => this.onChange(e, index)}
              />
              <input
                type="tel" // 改为tel类型，更规范
                value={contact.phone}
                placeholder="电话"
                name="phone"
                onChange={(e) => this.onChange(e, index)}
              />
            </div>
          ))}
          <button onClick={this.addContactField}>+ 添加联系人</button>
          <button type="submit"> 提交表单</button>
        </form>
      </div>
    );
  }
}

export default App;

调试方法说明 #

1. 打开浏览器开发者工具（按F12），切换到Console标签页
2. 修改酒店字段或联系人字段时，会实时打印对应的数据更新日志
3. 点击添加联系人按钮，会打印当前联系人数量
4. 提交表单时，会打印包含酒店信息和所有联系人的完整表单数据

内容的提问来源于stack exchange，提问作者Amit Gomes