[dmitry.suhotsky]

Реализую 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;