В компоненте react не обновляются input

@Dim04ka · Регистрация: 16.11.2018

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

Реализую CRUD приложение. Добавление и удаление реализовал. Возник вопрос с обновлением. Для этого:
1) При нажатии кнопки "Редакт" передаю в компанент `App` `item.id` элемента, который предстоит отредактировать и загрузить снова.
2) Нахожу, фильтрую и пишу в стейт

JavaScript
1
2
3
4
      readItem = (id) => {
        const readItem = this.state.auto.filter((el) => el.id === id)
        this.setState({readItem})
      }

3) Передаю значения в дочерний компонент

JavaScript
1
<Header readItem={this.state.readItem}/>

4) В дочернем элементе меняю стейт, он приходит и в dev tools видно что менятся, но значения в инпутах не отображается

JavaScript
1
2
3
4
5
6
7
8
9
10
11
      constructor(props) {
        super(props);
        this.state = {
          id: this.props.readItem.id,
          name: this.props.readItem.name,
          marka: this.props.readItem.marka,
          country: this.props.readItem.country,
          price: this.props.readItem.price,
          url: this.props.readItem.url
        }
      }

инпут

JavaScript
1
2
3
4
5
<input
          name="name"
          value={name}
          onChange={this.inputName}
          placeholder="Название" />

Ниже представленные компаненты:
App

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
 import React, { Component } from 'react';
    import './App.css';
    import Header from './component/Header/Header'
    import ListAuto from './component/ListAuto/ListAuto'
    import EditItems from './component/Edit/EditItems'
    
    class App extends Component {
      state = {
        auto: [
          {
            "id": 1,
            "name": "Авто №1",
            "marka": "Марка машины №1",
            "price": 50,
            "country": "Russia",
            "url": "https://finance.liga.net/images/general/2018/08/29/thumbnail-tw-20180829113845-1826.jpg"
          },
          {
            "id": 2,
            "name": "Авто №2",
            "marka": "Марка машины №2",
            "price": 20,
            "country": "Russia",
            "url": "https://icdn.lenta.ru/images/2017/08/23/14/20170823145604779/pic_b21fd6a6551e45ce4a397c3c2662ec8f.jpg"
          },
        ],
        readItem: [{
          "id": null,
          "name": null,
          "marka": null,
          "price": null,
          "country": null,
          "url": null
        }]
      }
    
      addItem = (item) => {
        const addAuto = {
          id: this.state.auto.length + 1,
          name: item.name,
          marka: item.marka,
          price: item.price,
          country: item.country,
          url: item.url
        }
        this.setState(({ auto }) => {
          const NewArray = [
            ...auto,
            addAuto
          ]
          return {
            auto: NewArray
          }
    
    
        })
      }
      delItem = (id) => {
        const NewArr = this.state.auto.filter((el) => el.id !== id)
        this.setState({
          auto: NewArr
        })
      }
      readItem = (id) => {
        const readItem = this.state.auto.filter((el) => el.id === id)
        this.setState({readItem})
      }
    
      render() {
        const { auto } = this.state;
        return (
          <div className="App">
            <Header addItem={this.addItem}
                    readItem={this.state.readItem}/>
            <EditItems ArrayAutoForRead={auto}
              delItemId={this.delItem}
              readItemId={this.readItem} />
            <ListAuto ArrayAuto={auto} />
          </div>
        );
      }
    }
    
    export default App;

Header

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
import React, { Component } from 'react';
    
    class Header extends Component {
      constructor(props) {
        super(props);
        this.state = {
          id: this.props.readItem.id,
          name: this.props.readItem.name,
          marka: this.props.readItem.marka,
          country: this.props.readItem.country,
          price: this.props.readItem.price,
          url: this.props.readItem.url
        }
      }
    
      addItem = () => {
        const { name, marka, country, price, url } = this.state;
        if (name !== "" && marka !== "" && country !== "" && price !== "" && url !== "") {
          const item = {
            name,
            marka,
            country,
            price,
            url
          }
          this.props.addItem(item)
          this.setState({ name: "", marka: "", country: "", price: "", url: "" })
        } else {
          alert('Заполните все поля')
        }
      }
      inputName = (e) => {
        const name = e.target.value;
        this.setState({ name })
      }
      inputMarka = (e) => {
        const marka = e.target.value;
        this.setState({ marka })
      }
      inputCountry = (e) => {
        const country = e.target.value;
        this.setState({ country })
      }
      inputPrice = (e) => {
        const price = e.target.value;
        this.setState({ price })
      }
      inputUrl = (e) => {
        const url = e.target.value;
        this.setState({ url })
      }
      render() {
        const { name, marka, country, price, url } = this.state;
        return (
          <div className="Header">
            Header menu
                  <input
              name="name"
              value={name}
              onChange={this.inputName}
              placeholder="Название" />
            <input
              name="marka"
              value={marka}
              onChange={this.inputMarka}
              placeholder="Марка" />
            <input
              name="country"
              value={country}
              onChange={this.inputCountry}
              placeholder="Производитель" />
            <input
              name="price"
              value={price}
              onChange={this.inputPrice}
              placeholder="Цена" />
            <input
              name="url"
              value={url}
              onChange={this.inputUrl}
              placeholder="url картинки" />
    
            <button onClick={this.addItem}>Добавить</button>
    
          </div>
        );
      }
    }
    
    export default Header;

EditItems

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
 import React, { Component } from 'react';
    import './style.css'
    
    class EditItems extends Component {
        delItem = (id) => {
            this.props.delItemId(id)
        }
        readItem = (id) => {
            this.props.readItemId(id)
        }
      render() {
          const {ArrayAutoForRead} = this.props
        return (
          <div className="EditItems">
                Редактирование данных
                <table >
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>Название</th>
                        <th>Марка</th>
                        <th>Производитель</th>
                        <th className="th">url фото</th>
                        <th>Цена</th>
                        <th>Действие</th>
                    </tr>
                    </thead>
                    <tbody>
                        {
                            ArrayAutoForRead.map( (item,index) => {
                                return (
                                <tr rey={index}>
                                    <th>{item.id}</th>
                                    <th>{item.name}</th>
                                    <th>{item.marka}</th>
                                    <th>{item.country}</th>
                                    <th className="th">{item.url}</th>
                                    <th>{item.price}</th>
                                    <th><button onClick={() => this.readItem(item.id)}>Редакт</button><button onClick={() => this.delItem(item.id)}>X</button></th>
                                </tr>
    
                                )
                            })
                        }
    
    
                    </tbody>
                </table>
    
          </div>
        );
      }
    }
    
    export default EditItems;

ListAuto

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
import React, { Component } from 'react';
    import ItemAuto from '../ItemAuto/ItemAuto'
    
    
    class ListAuto extends Component {
        render() {
    
            return (
                <>
                    {
                        this.props.ArrayAuto.map((item, index) => {
                            return (
                                <div className="ListAuto">
                                    <ItemAuto key={index} itemAuto={item} />
                                </div>
                            )
                        })
                    }
                </>
            );
        }
    }
    
    export default ListAuto;

@Evgen1337 · 18.01.2019, 12:57

надо в Header добавить
https://reactjs.org/docs/react... nentupdate

потому что, ты перекладываешь props в state в конструкторе, и при последующем обновлении state в App, конструктор в Header не вызывается... вообще лучше прочитай про https://reactjs.org/docs/context.html или используй https://github.com/mobxjs/mobx-react или https://github.com/reduxjs/react-redux или ... )

@Dim04ka · 18.01.2019, 14:09 **[ТС]**

Что должно быть в shouldcomponentupdate, какие параметры? mob-x и redax не изучил, пробую пока без них

@Evgen1337 · 18.01.2019, 14:42

App.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react';
import Should from './Should'
 
class App extends Component {
  state = {
    app: 'one'
  }
 
  render() {
    return <div>
      <div>App state: {this.state.app}</div>
      <Should app={this.state.app} />
      <button onClick={() => this.setState({ app: parseInt(Math.random() * 10) })}>random</button>
    </div>
  }
}
 
export default App;

Should.js

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
import React from 'react'
 
export default class Should extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      app: this.props.app
    }
  }
 
  // // без этого не будет обновляться state если изменились props
  // // надо помнить если передается объект, и этот объект изменился,
  // // то ссылка всеравно остается на этот же объект, и тогда проверка должна быть 
  // // deepEquals || shallowCompare...
  // static getDerivedStateFromProps(nextProps, prevState) {
  //   if (nextProps.app !== prevState.app) {
  //     return {
  //       app: nextProps.app
  //     }
  //   } else return null
  // }
 
  // // или
  // componentWillReceiveProps(nextProps) {
  //   if (this.props.app !== nextProps.app) {
  //     this.setState({ app: nextProps.app })
  //   }
  // }
 
  render() {
    return <div>Should: {this.state.app} </div>
  }
}

сорри shouldComponentUpdate не для этой задачи %)))
зато есть два метода для этой задачи, я закомментировал два метода...

т.е. в App создадим некий state.app и при клике на кнопку будем его обновлять, также этот state передадим в качестве props в Should компонент, и этот props положим в state в Should компонента... и видим, что если блок закомментирован, то обновление компонента Should не будет происходить...

https://reactjs.org/blog/2018/... state.html

@Dim04ka · 18.01.2019, 16:28 **[ТС]**

Дописал

JavaScript
1
2
3
4
5
  componentWillReceiveProps(nextProps) {
      if (this.props.readItem !== nextProps.readItem) {
        this.setState({ state: nextProps.readItem })
      }
    }

Данные в стейт приходят, но в инпутах не отображаются.

@Evgen1337 · 18.01.2019, 16:48

ты же в Header в constructor так делаешь:

JavaScript
1
2
3
4
5
6
7
8
this.state = {
          id: this.props.readItem.id,
          name: this.props.readItem.name,
          marka: this.props.readItem.marka,
          country: this.props.readItem.country,
          price: this.props.readItem.price,
          url: this.props.readItem.url
        }

а в componentWillReceiveProps ты устанавливаешь this.setState({ state: nextProps.readItem}) и после этого у тебя в state у Header компонента должен создаться еще один ключ state в котором и будет объект nextProps.readItem... в общем у тебя проблема в этой строке this.setState({ state: nextProps.readItem}) и по идее она должна быть в виде this.setState({...nextProps.readItem}), нет? да! )

Добавлено через 32 секунды
выводи в консоль state и смотри что там...

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера 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, то после закрытия окошка. . .

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	18.01.2019, 12:57
	надо в Header добавить https://reactjs.org/docs/react... nentupdate потому что, ты перекладываешь props в state в конструкторе, и при последующем обновлении state в App, конструктор в Header не вызывается... вообще лучше прочитай про https://reactjs.org/docs/context.html или используй https://github.com/mobxjs/mobx-react или https://github.com/reduxjs/react-redux или ... ) 0

@Dim04ka 0 / 0 / 0 Регистрация: 16.11.2018 Сообщений: 4
	18.01.2019, 14:09 [ТС]
	Что должно быть в shouldcomponentupdate, какие параметры? mob-x и redax не изучил, пробую пока без них 0