React не рендерится, если я не добавлю инструкцию console.log () - PullRequest
0 голосов
/ 18 февраля 2020

У меня есть эти два компонента React:

class Record extends React.Component {
    render() {
        ...
        return (
      <div className="animated slideInUpTiny animation-duration-3">
        {
          showMessage && currentRecord &&
          <Alert />
        }
        <div className="row">
          <CardBox styleName="col-lg-12">
            <AttrActions module={this.props.module} app={this.props.app} set={currentCatalog} record={currentRecord} accessCase="controls"/>
            <AttrForm
              fields_meta={alertedFieldsMeta}
              currentForm={this.getCurrentForm()}
              originalForm={this.state.originalForm}
              reportChange={this.catchChange}
              fetchList={fetchList}
              hierarchy={this.state.hierarchy}
              catalogsList={catalogsList}
              fetchRecord={fetchRecord}
              searchInCatalog={searchInCatalog}
            />
          </CardBox>
        </div>
        <div className="crud-footer">
          <ControlButtons />
        </div>
      </div>
    );
  }
}

class AttrActions extends React.Component {
  render() {
    console.log(this.props);
    switch (this.props.module) {
      case 'Inventory': {
        return (
          <InventoryActions {...this.props} />
        );
      }
      default: {
        return null;
      }
    }
  }
}

Проблема в том, что компонент AttrActions никогда не отображается, если я не добавлю инструкцию console.log() в компонент Record, например:

return (
      <div className="animated slideInUpTiny animation-duration-3">
        {
          showMessage && currentRecord &&
          <Alert />
        }
        <div className="row">
          <CardBox styleName="col-lg-12">
            {console.log('here')}
            <AttrActions module={this.props.module} app={this.props.app} set={currentCatalog} record={currentRecord} accessCase="controls"/>
            <AttrForm
              fields_meta={alertedFieldsMeta}
              currentForm={this.getCurrentForm()}
              originalForm={this.state.originalForm}
              reportChange={this.catchChange}
              fetchList={fetchList}
              hierarchy={this.state.hierarchy}
              catalogsList={catalogsList}
              fetchRecord={fetchRecord}
              searchInCatalog={searchInCatalog}
            />
          </CardBox>
        </div>
        <div className="crud-footer">
          <ControlButtons />
        </div>
      </div>
    );

Только в этом случае я получаю console.log(this.props) в консоли. Если я не добавлю эту инструкцию, компонент AttrActions никогда не будет обработан.

РЕДАКТИРОВАТЬ

Я обнаружил, что когда я помещаю каждый компонент в разные CardBox, проблема исчезает, но я бы хотел, чтобы они оба содержались вместе:

return (
      <div className="animated slideInUpTiny animation-duration-3">
        {
          showMessage && currentRecord &&
          <Alert />
        }
        <div className="row">
          <CardBox styleName="col-lg-12">
            <AttrActions module={this.props.module} app={this.props.app} set={currentCatalog.name} record={currentRecord} accessCase="controls"/>
          </CardBox>
          <CardBox styleName="col-lg-12">
            <AttrForm
              fields_meta={alertedFieldsMeta}
              currentForm={this.getCurrentForm()}
              originalForm={this.state.originalForm}
              reportChange={this.catchChange}
              fetchList={fetchList}
              hierarchy={this.state.hierarchy}
              catalogsList={catalogsList}
              fetchRecord={fetchRecord}
              searchInCatalog={searchInCatalog}
            />
          </CardBox>
        </div>
        <div className="crud-footer">
          <ControlButtons />
        </div>
      </div>
    );
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...