Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: ReactJS
Войти
Регистрация
Восстановить пароль
 
Dim04ka
0 / 0 / 0
Регистрация: 16.11.2018
Сообщений: 4
1

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

18.01.2019, 12:46. Просмотров 278. Ответов 5


Реализую 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;
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
18.01.2019, 12:46
Ответы с готовыми решениями:

События в react js
Вот мне немного неясен момент с this._inputElement.value. В рендере оно заменится на...

React и не только
Добрый вечер, представьте, есть человек, который делал лендинги и работал с html/css немного...

Недостатки React
Здравствуйте. Расскажите пожалуйста о недостатках, архитектурный просчетах, неудобствах и т.д. с...

React и clearInterval
Добрый день! &lt;div onClick={this.start.bind(this)}&gt;старт&lt;/div&gt; &lt;div...

React на хостинге
Пытаюсь установить react на хостинг beget, как тест и получаю, ошибку с import, webpack и babel...

5
Evgen1337
224 / 143 / 62
Регистрация: 10.12.2017
Сообщений: 512
18.01.2019, 12:57 2
надо в Header добавить
https://reactjs.org/docs/react-component.html#shouldcomponentupdate

потому что, ты перекладываешь 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  [ТС] 3
Что должно быть в shouldcomponentupdate, какие параметры? mob-x и redax не изучил, пробую пока без них
0
Evgen1337
224 / 143 / 62
Регистрация: 10.12.2017
Сообщений: 512
18.01.2019, 14:42 4
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/06/07/...ved-state.html
0
Dim04ka
0 / 0 / 0
Регистрация: 16.11.2018
Сообщений: 4
18.01.2019, 16:28  [ТС] 5
Дописал
Javascript
1
2
3
4
5
  componentWillReceiveProps(nextProps) {
      if (this.props.readItem !== nextProps.readItem) {
        this.setState({ state: nextProps.readItem })
      }
    }
Данные в стейт приходят, но в инпутах не отображаются.
0
Evgen1337
224 / 143 / 62
Регистрация: 10.12.2017
Сообщений: 512
18.01.2019, 16:48 6
ты же в 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 и смотри что там...
0
18.01.2019, 16:48
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.01.2019, 16:48

React native
Всем ку , есть проблемка уже час сижу не могу понять в чем проблема . Вообщем нужно установить...

React.js с Material-ui
Привет ребята! Возник вопрос и проблема с React.js. Я написал код который должен вывести мне кнопки...

Научиться работе на React
здравствуйте, не так давно решился разобраться в библиотеке или фреймворке react js и столкнулся с...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru