0

Пример моего кода, как я удаляю элемент, но корректно удаляется только в последовательности от последнего элемента к первому, как корректно реализовать удаление?

class List extends React.Component{
constructor(props){
    super(props);
    this.state = {type: props.type, items: props.items}
    
}

remove(id){
    let tmpItems = this.state.items.filter((el) => el.id != id);
    this.setState( {
            items: tmpItems
    })
}


render(){
    return <div className="row d-flex flex-row align-items-center justify-content-center w-100 h-100 overflow-auto m-0 h-auto">
        {this.state.items.map((item) => <Items item = {item}  remove = {this.remove.bind(this)} />)}
    </div>
    }
}



class Items extends React.Component{
constructor(props){
    super(props);
    
    this.setName = this.setName.bind(this);
    this.setContent = this.setContent.bind(this);
    this.setDate = this.setDate.bind(this);
    this.state = {id : this.props.item.id, name: this.props.item.name , content: this.props.item.content, date : this.props.item.date, type : props.item.type , isNew: props.item.isNew} 
}
componentDidMount(){
}

setName(e){
    let text = e.target.textContent.slice(0, 50);
    this.setState({name: text})
    setTimeout(() => this.afterSet(), 0)
}


setContent(e){
    let text = e.target.textContent.slice(0, 1000);
    this.setState({content: text})
    setTimeout(() => this.afterSet(), 0)
}

setDate(e){
    this.setState({date: e.target.text})
    setTimeout(() => this.afterSet(), 0)
}

afterSet(){
    $.post('/toDoSave', this.state, (data) => {
        if (data.isNew){
            this.setState({id: data.id, isNew: false})
        }
    })


  }


render(){
  
    return (
        <div className = " item container" key = {this.state.id} >
           
            <div contentEditable={true} placeholder = {"Имя"} className="note-name border-bottom border-1 m-2 d-flex align-items-center outline-none my-text text-break overflow-auto" onBlur = {this.setName}>
                {this.state.name}
            </div>

            <div contentEditable={true} placeholder = {"Текст"} className="note-content border-1 m-2 outline-none my-text overflow-auto text-break my-scroll" onBlur = {this.setContent}>
                {this.state.content}
            </div>


            <div className="note-button-group m-2 border-top border-1 d-flex flex-row align-items-center justify-content-between">
                <div class="d-flex flex-row">
                    <div className="note-button p-2 ms-1"><i class="fa-solid fa-chart-bar"></i></div>
                </div>
                <div class="d-flex flex-row">
                     <div className="note-button p-2 ms-1"><i class="fa-solid fa-circle-exclamation"></i></div> 
                </div>
                <div class="d-flex flex-row">
                    <div className="note-button p-2 ms-1"><i class="fa-solid fa-calendar-days"></i></div>   
                    <div className="note-button p-2 ms-1" onClick = {() => {this.props.remove(this.state.id)}} ><i class="fa-solid fa-trash-can"></i></div>    
                </div>
                      
            </div>
        </div>
        
    )
}

}

5
  • ай, не используйте классовые компоненты
    – entithat
    22 мар 2022 в 9:18
  • через hooks лучше сделать? {"Забыли добавить key для элементов списка."} <div className = " item container" key = {this.state.id} > это разве не то? 22 мар 2022 в 9:37
  • то, но ключ надо добавлять для обертки, а не для внутреннего компонента.
    – entithat
    22 мар 2022 в 9:38
  • 1
    ага, спасибо, заработало 22 мар 2022 в 9:40
  • Функциональные компоненты помогают избегать конструкторов всяких, байндингов и тд. А хуки - это просто функции, которые позволяют работать с состоянием компонента.
    – entithat
    22 мар 2022 в 9:40

1 ответ 1

0

Добавить key={} надо было для каждого элемента списка. Вы не там его добавили изначально.

import React from "react";

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: props.type,
      items: props.items
    };
  }

  remove(id) {
    console.log(id);
    this.setState({
      items: this.state.items.filter((el) => el.id !== id)
    });
  }

  render() {
    return (
      <div className="row d-flex flex-row align-items-center justify-content-center w-100 h-100 overflow-auto m-0 h-auto">
        {this.state.items.map((item) => (
          <Items key={item.id} item={item} remove={this.remove.bind(this)} />
        ))}
      </div>
    );
  }
}

class Items extends React.Component {
  constructor(props) {
    super(props);

    this.setName = this.setName.bind(this);
    this.setContent = this.setContent.bind(this);
    this.setDate = this.setDate.bind(this);

    this.state = {
      id: this.props.item.id,
      name: this.props.item.name,
      content: this.props.item.content,
      date: this.props.item.date,
      type: props.item.type,
      isNew: props.item.isNew
    };
  }

  setName(e) {
    this.setState({ name: e.target.textContent.slice(0, 50) });
    setTimeout(() => this.afterSet(), 0);
  }

  setContent(e) {
    this.setState({ content: e.target.textContent.slice(0, 1000) });
    setTimeout(() => this.afterSet(), 0);
  }

  setDate(e) {
    this.setState({ date: e.target.text });
    setTimeout(() => this.afterSet(), 0);
  }

  afterSet() {
    $.post('/toDoSave', this.state, (data) => {
        if (data.isNew) {
            this.setState({id: data.id, isNew: false})
        }
    })ж
  }

  render() {
    return (
      <div className="item container">
        <div
          contentEditable={true}
          placeholder={"Имя"}
          className="note-name border-bottom border-1 m-2 d-flex align-items-center outline-none my-text text-break overflow-auto"
          onBlur={this.setName}
        >
          {this.state.name}
        </div>

        <div
          contentEditable={true}
          placeholder={"Текст"}
          className="note-content border-1 m-2 outline-none my-text overflow-auto text-break my-scroll"
          onBlur={this.setContent}
        >
          {this.state.content}
        </div>
        <div className="note-button-group m-2 border-top border-1 d-flex flex-row align-items-center justify-content-between">
          <div className="d-flex flex-row">
            <div className="note-button p-2 ms-1">
              <i className="fa-solid fa-chart-bar"></i>
            </div>
          </div>
          <div className="d-flex flex-row">
            <div className="note-button p-2 ms-1">
              <i className="fa-solid fa-circle-exclamation"></i>
            </div>
          </div>
          <div className="d-flex flex-row">
            <div className="note-button p-2 ms-1">
              <i className="fa-solid fa-calendar-days"></i>
            </div>
            <div
              className="note-button p-2 ms-1"
              onClick={() => {
                this.props.remove(this.props.item.id);
              }}
            >
              remove
              <i className="fa-solid fa-trash-can"></i>
            </div>
            <hr />
          </div>
        </div>
      </div>
    );
  }
}

export default function App() {
  return (
    <List
      items={[
        {
          id: 1,
          name: "name1",
          content: "namdse1",
          date: new Date(),
          type: "name1",
          isNew: false
        },
        {
          id: 2,
          name: "name2",
          content: "namdse2",
          date: new Date(),
          type: "name2",
          isNew: false
        },
        {
          id: 3,
          name: "name3",
          content: "namdse3",
          date: new Date(),
          type: "name3",
          isNew: false
        }
      ]}
    />
  );
}

P.S. Используйте функциональные компоненты если можно, будет выглядеть читабельнее.

Ваш ответ

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

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