React.js, почему с первого раза не обновляется массив?

Question

[TheGhost902]

Здравствуйте, не могу понять в чём дело, пытаюсь сделать простой ToDo list , состоящий из поле ввода, кнопки и элементов. После нажатия на кнопку, информация из поля ввода пушится(.push(...)) в изначально пустой массив, потом этот массив копируется в state и потом уже выводится элементом. Проблема в том что после попытки добавить первую задачу ничего не выводится, но при добавлении второй, всё начинает работать нормально, при этом ещё и первая появляется

import React from 'react';

class AddItems extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: '',
            items: []
        };
        this.inputChange = this.inputChange.bind(this);
        this.addNewItem = this.addNewItem.bind(this);
        this.arrOfItems = [];
        this.showItems = this.showItems.bind(this);
        this.arrOfLiElements = [];
    }

    inputChange(event){
        this.setState({inputValue: event.target.value});
    }

    addNewItem(){
        //если инпут пустой то return
        if (this.state.inputValue === '') return;

        //добавление нового элемента в массив
        this.arrOfItems.push({
            text: this.state.inputValue,
            id: (new Date()).getTime().toString()
        });

        //обновление состояния (обновление массива с элементами, сброс инпута)
        this.setState({
            items: this.arrOfItems,
            inputValue: ''
        });
        console.log(this.arrOfItems); //все элементы на месте
        console.log(this.state.items); // при первом вызове пустой, потом всё нормально
        
        //переделываем обычный массив в массив li элементов
        this.showItems();
    }

    showItems() {
        this.arrOfLiElements = this.state.items.map((item) => <li key={item.id}>{item.text}</li>)
    }

    render() {
        return (
            <div className="addItems">
                <div className="addSection">
                    <input type="text" value={this.state.inputValue} onChange={this.inputChange}/>
                    <input type="submit" onClick={this.addNewItem}/>
                </div>
                <div className="listSection">
                    <ul>{this.arrOfLiElements}</ul>
                </div>
            </div>
        )
    }
}

export default AddItems;

Может кто-нибудь подсказать почему так происходит и как исправить?

Answer 1

[0xD34F]

Может кто-нибудь подсказать почему так происходит и как исправить?

Отвечать на вопрос "почему" особого смысла нет - ерундой какой-то занимаетесь, все эти дополнительные массивы, кто вас этим глупостям научил?

Как исправить - да выбросить всё лишнее на хрен, оставить один массив items, с ним и работать:

class AddItems extends React.Component {
  state = {
    value: '',
    items: [],
  }

  inputChange = ({ target: { value } }) => {
    this.setState({ value });
  }

  addNewItem = () => {
    if (this.state.value) {
      this.setState({
        items: [ ...this.state.items, {
          text: this.state.value,
          id: (new Date()).getTime().toString(),
        } ],
        value: '',
      });
    }
  }

  render() {
    return (
      <div className="addItems">
        <div className="addSection">
          <input type="text" value={this.state.value} onChange={this.inputChange} />
          <input type="submit" onClick={this.addNewItem} />
        </div>
        <div className="listSection">
          <ul>{this.state.items.map((item) => <li key={item.id}>{item.text}</li>)}</ul>
        </div>
      </div>
    )
  }
}

Comments

[TheGhost902]

Спасибо за решение, внимательно просмотрел вроде понял как работает. Отвечаю на ваш вопрос: глупостям научился сам =) Только начинаю изучение реакта и поиск нужной информации даётся с трудом

[0xD34F]

TheGhost902, не надо ничего искать, есть же документация.