0

Жесть какая. Есть 2 кнопки - удалить и добавить. Кнопки почти одинаковые, но добавить не работает совсем, уже не знаю в чем проблема...Кучу времени всадил на это, помогите пожалуйста.

Это связанно с использованием findIndex? Или [...data что так делаю? Вроде я их менял на другие способы но также...

Вот три части:

введите сюда описание изображения

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { label: "GGWPLANAYA", important: true, id: 1 },
        { label: "SOMNUS", important: false, id: 2 },
        { label: "PAPARAZZI", important: false, id: 3 }
      ]
    };
    this.deleteItem = this.deleteItem.bind(this);
    this.addItem = this.addItem.bind(this);

    this.maxId = 4;
  }

  deleteItem(id) {
    this.setState(({ data }) => {
      const index = data.findIndex(elem => elem.id === id);
      const newArr = [...data.slice(0, index), ...data.slice(index + 1)];
      return {
        data: newArr
      }

    });
  }

  addItem(body) {
    const Arr = {
      label: body,
      important: false,
      id: this.maxId++
    };
    this.setState = (({ data }) => {
      return {
        data: [...data, Arr]
      }
    });
  }

  render() {
    return (
      <div className="app" >
        <AppHeader />
        <div className="search-panel d-flex">
          <SearchPanel />
          <PostStatusFilter />
        </div>
        <PostList posts={this.state.data} onDelete={this.deleteItem} />
        <PostAddForm onAdd={this.addItem} />
      </div>
    )
  }
}

////// POST__ADD__FORM

import React from "react";
import "./post-add-form.css";

const PostAddForm = ({ onAdd }) => {
  return (
    <div className="buttom-panel d-flex">
      <input
        placeholder="О чем вы думаете?"
        className="form-control new-post-label"
      />
      <button type="submit" className="btn btn-outline-secondary" onClick={() => onAdd('hello')}>
        Добавить
      </button>
    </div>
  );
};
export default PostAddForm;

и третий...

import React, { Component } from "react";
import "./post-list-item.css";

export default class PostListItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      important: false,
      like: false,
    };
    this.onImportant = this.onImportant.bind(this);
    this.onLike = this.onLike.bind(this);
  }

  onImportant() {
    this.setState(({ important }) => ({
      important: !important,
    }));
  }

  onLike() {
    this.setState(({ like }) => ({
      like: !like,
    }));
  }
  render() {
    const { label, onDelete } = this.props;
    const { like, important } = this.state;
    let classNames = "app-list-item d-flex justify-content-between";
    if (important === true) {
      classNames += " important";
    }
    if (like === true) {
      classNames += " like";
    }
    return (
      <div className={classNames}>
        <span className="app-list-item-label " onClick={this.onLike}>
          {label}
        </span>
        <div className="d-flex justify-content-center align-items-center">
          <button
            type="button"
            onClick={this.onImportant}
            className="btn-star btn-sm"
          >
            <i className="fa fa-star"></i>
          </button>
          <button type="button" className="btn-trash btn-sm" onClick={onDelete} >
            <i className="fa fa-trash-o"></i>
          </button>
          <i className="fa fa-heart"></i>
        </div>
      </div>
    )
  }
}

1 ответ 1

0

Ставьте начальное значение data: [].

Вместо findIndex+slice можно просто filter.

maxId бы в стейт.

setState = ( ==> setState(.

Можно использовать функциональные компоненты + useState.

2
  • Благодарю) улучшил кусочек deleteItem(id) { this.setState(({ data }) => { return { data: data.filter((item) => { return item.id !== id }) } }) } но вот не получается найти ошибку почему не работает кнопка добавить...
    – RTN JO
    Commented 11 авг. 2020 в 12:00
  • обновите исходники в вопросе Commented 11 авг. 2020 в 14:16

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.