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
    11 авг 2020 в 12:00
  • обновите исходники в вопросе 11 авг 2020 в 14:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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