Условный рендеринг в JSX без скрытия элемента

Question

Так что у меня есть этот компонент реакции, который содержит условный рендеринг в некоторой части. пока все хорошо, и эта практика действовала, как и ожидалось, на протяжении всего моего приложения.
но, что удивительно, элемент, о котором мы говорим, не становится скрытым в результате изменения состояния.

Позвольте мне предоставить вам минимальное представление соответствующего кода, поскольку исходный компонент слишком длинный. и громоздко.

import React from 'react';
import AnotherComponent from '../components/AnotherComponent';

export class TheComponent extends Component {
  /* 
    1. props.data is coming from mapping component state to redux connect
    2. connect file and selectors are alright, because other parts of this component
       work as expected, and even same props.data is used elsewhere in the component
    3. a method wihtout input as in showAnotherComponent = () => false; will hide the 
       AnotherComponent element successfully. but even sth like 
       showAnotherComponent = (data) => false; will not work!!!
    4. props.data is properly injected to the render method, console.log(props.data)  in reder 
       method will display updated value.
    5. props.data is never null or undefined and so on ..
  */
  showAnotherComponent = data => data.flag === 'AAA';

  render() {
    console.log(this.props.data); // will show the updated props.data

    return (
      <div className="row">
        <div className="col-md-10">
          <h1>Some heading</h1>
        </div>
        <div className="col-md-2">
          {/* the element in next line will always show up invariably, whatever the
          content of props.data. tried ternary, same result. */}
          {this.showAnotherComponent(this.props.data) && <AnotherComponent />}
        </div>
      </div>
    );
  }
}

export default TheComponent;

К сожалению, создать полностью работающий образец довольно сложно, учитывая все сторонние зависимости и избыточную проводку.

Тем не менее, если вы когда-либо сталкивались с подобной ситуацией и дошли до ее дна Пожалуйста, поделитесь своим опытом со мной.

примечание: обновленные данные props.data передаются компоненту в обычном режиме. в инструментах реагировать на это он обнаруживается, а в инструментах с избыточным количеством разработчиков история состояния вполне здорова. единственная проблема здесь состоит в том, что условное не скрывает элемент в ложном состоянии.

ОБНОВИТЬ. причина этого странного рендеринга была в том, что динамический цикл в том же компоненте рендерил этот AnotherComponent независимо от значения флага. что затрудняло определить, было то, что он отображал его на карте и передавал индекс динамического содержимого строки. В любом случае, спасибо всем и извините за возможный вводящий в заблуждение вопрос.

Answer 1

Здесь работает нормально.

Вы должны проверить данные в реквизитах, если есть какой-либо ключ flag или нет, и если есть ключ flag, проверьте, если это AAA или нет.

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: "aa"
    };
  }
  /* 
    1. props.data is coming from mapping component state to redux connect
    2. connect file and selectors are alright, because other parts of this component
       work as expected, and even same props.data is used elsewhere in the component
    3. a method wihtout input as in showAnotherComponent = () => false; will hide the 
       AnotherComponent element successfully. but even sth like 
       showAnotherComponent = (data) => false; will not work!!!
    4. props.data is properly injected to the render method, console.log(props.data)  in reder 
       method will display updated value.
    5. props.data is never null or undefined and so on ..
  */
  showAnotherComponent = data => data.flag === "AAA";

  render() {
    console.log(this.props.data); // will show the updated props.data

    return (
      <div className="row">
        <div className="col-md-10">
          <h1>Some heading</h1>
        </div>
        <div className="col-md-2">
          {/* the element in next line will always show up invariably, whatever the
          content of props.data. tried ternary, same result. */}
          {this.showAnotherComponent({ flag: this.state.data }) && (
            <div>asdsdasd</div>
          )}
        </div>
        <button onClick={() => this.setState({ data: "AAA" })}>Toggle</button>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Нажмите на Toggle, и данные будут отображены.