Передать значение объекта в подпорке другому компоненту

Question

Рассмотрим код ниже, мне нужно передать идентификатор в формате объекта другому компоненту с помощью реквизита. Но я стараюсь много раз и оно не работает. Я думаю, что у меня может быть какая-то ошибка, но я не уверен, где это.

Главная страница (обновлено):

render(props){
const data = this.state.data;
return (
    <div>
        <Header />
        <NavigationBar />
        <PurchaseInfoView show={this.state.displayModal} closeModal={this.closeModal} value={this.openModal}/>
          <div className="purchase-side">
            <div className="side-title">
              <h1>Purchase Order List</h1>
            </div>
            <hr class="solid" />
            {
              Object.keys(data).map((key) =>
                <div className="list-item">
                  <h2 onClick= {() => this.openModal(data[key].id)}> //get id
                    { data[key].item_name}
                  </h2>
                </div>
            )}
          </div>
          <div className="dads">        
        </div>
        </div>

    );
}

openModal (обновлено):

  openModal = (id) => {
    this.setState(
      {
        displayModal: true,
        id: id
      });
    console.log(id) // i can get the id from here id=1
  };

PurchaseInfoView для получения идентификатора (обновлено).

class PurchaseInfoView extends Component {
 render() {
        console.log(this.props.id) // get undefined
        return (
        <div className="Modal"
            style={{
                transform: this.props.show ,
                opacity: this.props.show ? "1" : "0"
              }}
            >

            <h3>Purchase Order detail</h3>
            <p>Id: {this.props.id}</p> //cannot get it
        </div>
        );
    }
}

export default PurchaseInfoView;

console.log результат:

Answer 1

Если вы хотите передать объект в подпорки, выполните следующие действия:

1. определите объект в состоянии ваших родителей.
2. передайте объект в подпорке при вызове компонентов
3. получить объект из реквизита в child.

Здесь вам не хватает второго шага!

Вы должны попробовать это:

MainPage

render(props){
const { data, modalObject, displayModal } = this.state; //use destructuring is more readable
return (
    <div>
        <Header />
        <NavigationBar />
        <PurchaseInfoView show={displayModal} closeModal={this.closeModal} modalObject={modalObject}/> //pass the object from destructuring state as props
        <div className="purchase-side">
          <div className="side-title">
            <h1>Purchase Order List</h1>
          </div>
          <hr class="solid" />
          {
            Object.keys(data).map((key) =>
              <div className="list-item">
                <h2 onClick= {() => this.openModal(data[key].id)}> //get id
                  { data[key].item_name}
                </h2>
              </div>
          )}
        </div>
        <div className="dads">        
      </div>
      </div>
    );
}

OpenModal

  openModal = (id) => {
    this.setState(
      {
        displayModal: true,
        modalObject: {id: id, ...any others key/val pair}
      });
  };

PurchaseInfoView

class PurchaseInfoView extends Component {
 render() {
        const { modalObject} = this.props; //here get your object from props
        console.log(modalObject.id);// here you have the object
        return (
        <div className="Modal"
            style={{
                transform: this.props.show ,
                opacity: this.props.show ? "1" : "0"
              }}
            >

            <h3>Purchase Order detail</h3>
            <p>Id: {modalObject.id}</p>
        </div>
        );
    }
}

Скажите, если у вас есть какие-либо вопрос в комментарии;)

NB: я сделал это с объектом (он же {}), если вам нужно больше вещей в вашем модале, чем просто id. Если нужен только id, вам нужно просто заменить modalObject на тот «id», который вам нужен

Cheers!

EDIT : чтобы это решение работало, вам нужно либо:

• инициализируйте ваше состояние, по крайней мере, так:

  this.state = {modalObject: {id: ''}}

• или выполнить ненулевой тест в дочернем компоненте перед отображением элемента следующим образом:

  Id: {modalObject && modalObject.id? modalObject.id: ''}

Это необходимо, потому что при первом рендеринге ваше состояние будет иметь начальное состояние, которое вы установили, поэтому, если вы не установили что-либо или не проверяли для значения ... ну ... это не определено! :)

(обратите внимание, что если идентификатор равен нулю, вместо неопределенной ошибки у вас будет пустое пространство, отображаемое в вашем модале)

Answer 2

Думаю, вы называете это неправильно. Это должно быть {this.props.id}

render() {
        console.log(this.props.id);
        return (
        <div className="Modal">
            <h3>Purchase Order detail</h3>
                <p>Id: {this.props.id}</p>  //Changed line
        </div>
        );
    }

Внутри главной страницы передайте идентификатор в PurchaseInfoView и получите доступ к нему в качестве реквизита

   <PurchaseInfoView show={this.state.displayModal} closeModal={this.closeModal} value={this.openModal} id={this.state.id}/>