Не удаляются инвойсы из DOM и db.json

@Max3738 · Регистрация: 24.01.2019

Студворк — интернет-сервис помощи студентам

Есть прога которая рендерит инвойсы с json файла , их можно удалять при помощи кнопки Remove напротив каждого инвойса в разметке.
Проблема в том что при нажатии на кнопку Remove компонента InvoiceItem возникает ряд ошибок и инвойс не удаляется не из разметки не из json.Как быть?
После первого нажатия на Remove инвойс удаляется но только из дома из jsona нет!, плюс возникает ошибка=>

Code
1
2
3
4
5
6
7
8
9
index.js:1375 Warning: Each child in a list should have a unique "key" prop.
Check the render method of `Invoices`. See [url]https://fb.me/react-warning-keys[/url] for more information.
    in InvoiceItem (at Invoices.js:106)
    in Invoices (at MainView.js:16)
    in div (at MainView.js:8)
    in main (at MainView.js:7)
    in MainView (at App.js:35)
    in div (at App.js:34)
    in App (at src/index.js:9)

Хотя в Invoices имеем =>

JavaScript
1
{items.map((data_base_item,i) => [U]<InvoiceItem key={data_base_item.id}[/U] ItemToRemoving={() => this.deleteById(data_base_item.id)} items={this.state.items[i++]} />)}

Затем, если нажать на любую другую кнопку Remove последует ошибка =>

Code
1
2
3
4
5
6
7
8
9
10
TypeError: Cannot read property 'id' of undefined
Invoices.deleteById
C:/Windows/System32/new-app/src/components/Invoices.js:59
  56 | 
  57 | const new_items = [];
  58 | for (let i = 0; i  < this.state.items.length; i++) {
> 59 |   if (this.state.items[i].id !== el) {
 | ^  60 |     new_items[i] = this.state.items[i];
  61 |     // this.state.items == new_items;
  62 |     console.dir(new_items[i])

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 import React  from 'react'
 
 
import EditButton from './EditButton'
 
 
 function InvoiceItem(props){
    
 
 
   
return(
   
<tr className="table__line">
    <td className="table__item"><p className="txt_table__item">{props.items.date_created}</p></td>
    <td className="table__item">
        <a className="table__link" href="/some/valid/uri"><p className="txt_table__item">INV-{props.items.number}</p></a>
    </td>
    <td className="table__item"><p className="txt_table__item">{props.items.date_supplied}</p></td>
    <td className="table__item"><p className="txt_table__item">{props.items.comment}</p></td>
    <td className="table__item">
        <button className="table__item btn_table__item" onClick={ props.ItemToRemoving}><p>Remove</p></button>
        <EditButton/>
 
    </td>
 
</tr>
 
)
    
 }

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React from 'react'
import InvoiceItem from './InvoiceItem'
 
class Invoices extends React.Component {
 
    constructor(props) {
      
      super(props);
       this.deleteById = this.deleteById.bind(this);
       this.addNewArrayToDB = this.addNewArrayToDB.bind(this);
      this.state = {
        error: null,
        isLoaded: false,
        items: []
      };
    }
    componentDidMount() {
      fetch('http://localhost:3001/db_datas')
        .then(db_datas => db_datas.json())
        .then(
          (result) => {
            this.setState({
              isLoaded: true,
              items: result
            });
          },
          (error) => {
            this.setState({
              isLoaded: true,
              error
            });
          }
        )
     
    }
    addNewArrayToDB(){
    
      fetch("http://localhost:3001/db_datas", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(this.state.items)
      
            }).then(function (res) {
              if (res.ok) {
                // delete (this.state.items);
                // alert('success')
              } else if (res.status === 401) {
                alert("Oops! ");
              }
            });
    }
 
 
  
deleteById(el){
  
  const new_items = [];
  for (let i = 0; i  < this.state.items.length; i++) {
    if (this.state.items[i].id !== el) {
      new_items[i] = this.state.items[i];
      // this.state.items == new_items;
      console.dir(new_items[i])
      console.log(this.state.items[i])
      console.log(this.state.items)
 
      console.log(el)
      console.log("____________________________________________________________________________")
 
      
 
 
     
  // alert(`${this.state.items[0].id}`)
}
 
  }
  this.setState({items : new_items});
    this.addNewArrayToDB();
}
 
 
    render() {
      
      const { error, isLoaded, items } = this.state;
      if (error) {
        return <div>{error.message}.Or try to run json-server in folder 'public/jsonserver' of this app.Use the command json-server --watch db.json --port 3001 in PowerShell</div>
      } else if (!isLoaded) {
        return <div>Loading...</div>;
      } else {
        return (
          
          <section className="invoices-table invoices__invoices-table">
                <h3 className="invoices-table__title">Invoices</h3>
                <table className="table invoices-table__table">
                    <thead className="table__header">
                        <tr className="table__line">
                            <td className="table__item">Create</td>
                            <td className="table__item">No</td>
                            <td className="table__item">Supply</td>
                            <td className="table__item">Comment</td>
                            <td className="table__item">Actions</td>
                        </tr>
                    </thead>
                    <tbody className="table__body">
                    {/* ItemToRemoving={() => this.deleteById(data_base_item.id)} */}
           {items.map((data_base_item,i) => <InvoiceItem key={data_base_item.id} ItemToRemoving={() => this.deleteById(data_base_item.id)} items={this.state.items[i++]} />)}
           
          </tbody>
                </table>
            </section>
 
        )
    }
  
  }}
export default Invoices;

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .