Реализую CRUD. Требуется отобразить в полях выбранное значение, изменит и сохранить обратно.
Передаю измененное значение в компонент, и если значение предыдущих props отлично от значения текущего стейт, запускаю функцию update
componentDidUpdate(prevProps) {
if (this.props.selectItem !== prevProps.selectItem) {
this.update();
}
}
update = () => {
this.setState({ selectItem: this.props.selectItem })
console.log(this.state.selectItem)
}
Выводу текущий стейт в лог - новый state отображается, но в инпутах значения не изменяются. В предыдущем показали реализацию CreateElementa, вопрос, это единственный метод для реализации? и почему при измененном стейте значения не изменились?
import React, { Component } from 'react';
import './App.css';
import Table from './component/Table'
import ReadItem from './component/read/ReadItem'
import { Provider } from './component/service-contex/service-contex'
class App extends Component {
state = {
mobile : [
{"id": 1, "name": "Dima", "phone": 12345},
{"id": 2, "name": "Ira", "phone": 67890},
],
selectItem:
{"name": null,
"phone": null}
}
deleteItem = (id) => {
console.log(id);
const newMobile = this.state.mobile.filter((el) => el.id !== id )
this.setState({
mobile: newMobile
})
}
updateItem = (id) => {
console.log(id);
const selectItem = this.state.mobile.filter((el) => el.id === id )
this.setState({
selectItem: selectItem
})
}
render() {
return (
<Provider value={this.state}>
<Table deleteItem={this.deleteItem}
updateItem={this.updateItem}/>
<ReadItem selectItem={this.state.selectItem}/>
</Provider>
);
}
}
export default App;
import React, { Component } from 'react';
import { Consumer } from './service-contex/service-contex'
class Table extends Component {
delItem = (id) => {
this.props.deleteItem(id);
}
update = (id) => {
this.props.updateItem(id);
}
render() {
return (
<table>
<Consumer>
{contex => {
return (
contex.mobile.map((item, index) => {
return (
<tr key={index}>
<th>{item.id}</th>
<th>{item.name}</th>
<th>{item.phone}</th>
<th><button onClick={() => this.update(item.id)}>P</button><button onClick={() => this.delItem(item.id)}>X</button></th>
</tr>)
})
)
}
}
</Consumer>
</table>
);
}
}
export default Table;
import React, { Component } from 'react';
class ReadItem extends Component {
constructor(props) {
super(props);
this.state = {
selectItem:
{"name": null,
"phone": null}
}
}
componentDidUpdate(prevProps) {
if (this.props.selectItem !== prevProps.selectItem) {
this.update();
}
}
update = () => {
this.setState({ selectItem: this.props.selectItem })
console.log(this.state.selectItem)
}
render() {
return (
<>
<div> Name
<input defaultValue={this.state.name}></input>
</div>
<div> Phone
<input defaultValue={this.state.phone}></input>
</div>
<div>
<button>Save</button>
<button>Cancel</button>
</div>
</>
)
}
}
export default ReadItem;
