когда я нажимаю кнопку добавления несколько раз, это должно показать, что я здесь div с кнопкой удаления несколько раз

Question

• Я пытаюсь создать простой пользовательский интерфейс, чтобы я мог учиться реагировать.
• прямо сейчас, когда я нажимаю кнопку добавления, он покажет, что я здесь - div и кнопка удаления
• когда я нажимаю кнопку добавления несколько раз, это должно показать, что я здесь с кнопкой удаления несколько раз.
• , поэтому я исследовал и нашел этот пример https://www.skptricks.com/2018/06/append-or-prepend-html-using-reactjs.html
• , используя этот пример, я реализовалМетод appendData, но он не добавляет div несколько раз.
• В моей консоли я могу видеть, сколько раз добавляется div console.log("this.displayData---->", this.displayData);
• Можете ли вы сказать мне, как это исправить.
• так что в будущем я сам это исправлю

https://stackblitz.com/edit/react-b2d3rb?file=demo.js

 onClick = () => {
    this.setState({ showResults: true });
    this.setState({ showOrHideSearch: true });
    this.displayData.push(
      <div style={{ display: this.state.showOrHideSearch ? "" : "none" }}>
        {" "}
        I am here
        <input
          ref="rbc-toolbar-label"
          type="submit"
          value="Delete"
          onClick={this.onDelete}
        />
      </div>
    );

    console.log("this.displayData---->", this.displayData);

    this.setState({ showdata: this.displayData });
  };

Answer 1

import React, { Component } from 'react';
import Calendar from 'rc-calendar';
import DatePicker from 'rc-calendar/lib/Picker';
import 'rc-calendar/assets/index.css';
import moment from 'moment';

class CalendarPage extends Component {
  constructor(props) {
    super(props);
    console.log("AsyncValidationForm  this.props---->", this.props);

    this.state = {
      displayData: []
    };
  }

  onClick = () => {
    let displayData = [...this.state.displayData];

    displayData.push( { text: 'I am here' });
    this.setState({ displayData: displayData });
  };

  onDelete = index => {
    let displayData = [...this.state.displayData];
    if(index > -1){
      displayData.splice(index, 1);
    }
    this.setState({ displayData: displayData });
  };

  handleChange = name => event => {
    const value = event.target.value;
    this.setState(
      {
        [name]: value,
        pristine: false
      },
      () => {
        this.props.handleChange(name, value); //setState username, password of VerticalLinearStepper.js
      }
    );
  };

   onSubmit(event) {
    event.preventDefault();
    var newItemValue = this.refs.itemName.value;

    if(newItemValue) {
      this.props.addItem({newItemValue});
      this.refs.form.reset();
    }
  }

  render() {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    let { displayData} = this.state;
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <input type="submit" value="add" onClick={this.onClick} />
          {displayData.length  > 0 ? displayData.map(function(data, index) {
            return (
            <div key={index}>
              {data.text} - For testing added index on screen {index}
              <input
                ref="rbc-toolbar-label"
                type="submit"
                value="Delete"
                onClick={() => this.onDelete(index)}
              />
            </div>
          )}, this) : null}
        </div>
      </form>
    );
  }
}

export default CalendarPage;

Answer 2

Во-первых, вы не должны использовать this.setState несколько раз, вместо этого вы должны делать это в одной строке.И вместо того, чтобы помещать данные в переменные класса, вы должны установить эти данные в вашу переменную состояния и ту же переменную, которую вы должны использовать в вашей функции визуализации.Будет хорошо, если вы сможете поделиться своим полным кодом ..