Multiples Forms渲染卡片

Question

我在尝试渲染我传入输入的数据以呈现“联系”卡时遇到了很多麻烦。

我正在处理输入，相应地改变状态，但是当涉及到最终状态时，使用我的所有数据呈现“联系卡”，我只是不知道如何使其工作。

我认为问题在于我的“renderCard”方法。如果有人能帮我一把，我想我真的很亲密但到目前为止......

import React, { Component } from 'react';

export default class Todo extends Component {

  state = {
    nom: '',
    age: '',
    ville: '',
    items: [],
    start: 0
  };


  onChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  onSubmit = (event) => {
    event.preventDefault();
    this.setState({
      nom: '',
      age: '',
      ville: '',
      items: [...this.state.items, this.state.nom, this.state.age, this.state.ville],
      start: 1
    });

  }


  renderCard = () => {
    return this.state.items.map((item, index) => {
        return (
            <div className="card" key={index}>
                {item.nom}
                {item.age} 
                {item.ville} 
            </div>    
        );
    });
}

  render() {
    return (
      <div>
        <div className="card mb-3">
          <div className="card-header">Ajouter une Personne</div>
          <div className="card-body">
            <form onSubmit={this.onSubmit}>
              <div className="form-group">
                <label htmlFor="name">Nom</label>
                <input
                  type="text"
                  className="form-control form-control-lg"
                  name="nom"
                  value={this.state.nom}
                  onChange={this.onChange}
                />
              </div>

              <div className="form-group">
                <label htmlFor="name">Age</label>
                <input
                  type="text"
                  className="form-control form-control-lg"
                  name="age"
                  value={this.state.age}
                  onChange={this.onChange}
                />
              </div>

              <div className="form-group">
                <label htmlFor="name">Ville</label>
                <input
                  type="text"
                  className="form-control form-control-lg"
                  name="ville"
                  value={this.state.ville}
                  onChange={this.onChange}
                />
              </div>


              <button className="btn btn-primary btn-block">Créez votre Fiche !</button>
            </form>
          </div>
        </div>


        {this.renderCard()}


      </div>
    );
  }
}

Answer 1

在提交状态下将项目设置为状态时出错。我希望这些项目应该是一个对象数组请检查下面的代码

onSubmit =（event）=> {event.preventDefault（）; this.setState（{nom：''，age：''，ville：''，items：[... this.state.items，{nom：this.state.nom，age：this.state.age，ville ：this.state.ville}]，开始：1}）;