Реакция: Динамическая строка не удалась

Question

Я не получаю никакого ответа при клике, который выполняет функцию addRow ().Что не так с моим кодом?

...
constructor(props) {
    super(props)
    this.state = {
      rowCount: 1
    }
  }
  addRow = () => this.setState({ rowCount: this.state.rowCount + 1 })
  renderRow = () => (
    <div>
      <Input type="text" />
      <Button onClick={this.addRow}>+</Button>
    </div>
  )
  render() {
    const { type, value } = this.props
    const { rowCount } = this
    const i = 0
    let rows = this.renderRow()
    while (i < rowCount) {
      rows = this.renderRow()
    }
    return rows
  }
...

Я знаю простой обходной путь, который использует время Лодаша.Здесь я пытаюсь реализовать это, используя vallina js.

Answer 1

addRow = () => {
  this.setState(prevState => ({ rowCount: prevState.rowCount + 1 }));
}

render() {
   const { rowCount } = this.state;
   const renderRow = () => {
      return Array(rowCount).fill(1).map((row, i) => (
        <div key={i}>
          <Input type="text" />
          <Button onClick={this.addRow}>+</Button>
        </div>
      )
   }
   return renderRow();
}

Что следует отметить здесь

Array(rowCount).fill(1).map((row, i) => {}) инициализирует массив, если rowCount индексирует, например, 5, и заполнит каждый index значением 1;

Еще одна вещь, которую следует отметить здесь this.setState(prevState => ({ rowCount: prevState.rowCount + 1 }));, это то, что я беру в предыдущем состоянии rowCount и добавляю к нему 1, чтобы обновить новое состояние.

Answer 2

Изменен row как массив для добавления каждого нового элемента в массив, рендеринга и увеличения значения i в цикле для увеличения.

 constructor(props) {
    super(props);
    this.state = {
      rowCount: 1
    };
  }
  addRow = () => this.setState({ rowCount: this.state.rowCount + 1 });
  renderRow = () => (
    <div>
      <input type="text" />
      <button onClick={this.addRow}>+</button>
    </div>
  );
  render() {
    const { type, value } = this.props;
    const { rowCount } = this.state;
    let i = 0;
    let rows = [];
    while (i < rowCount) {
      rows.push(this.renderRow());
      i++;
    }
    return <div>{rows}</div>;
  }

Answer 3

Вы заменяете одну и ту же строку снова и снова.Вместо этого вы должны использовать массив, например

let i = 1;
let rows = [this.renderRow()];
while (i < rowCount) {
    rows.push(this.renderRow());
    i++;
}
return <div>rows</div>

, и вам нужно увеличить свой счетчик i на i++.