JSX中的條件渲染不會隱藏元素

Question

所以我有這個React組件，其中在某些部分包含條件渲染。 到目前為止，一切都很好，這種做法在我的整個應用程序中都按預期運行。
但令人驚訝的是，我們所討論的元素並未因條件變化而被隱藏。

讓我為您提供相關代碼的最小表示，因為原始組件太長且繁瑣。

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;

不幸的是，考慮到所有第三方的依賴關系和redux接線，創建一個可以正常工作的樣本有點困難。

但是，如果您遇到過類似情況並陷入困境，請與我分享您的經驗。

注意：更新后的props.data通常會傳遞給組件。 在react dev工具中顯示出來，在redux dev工具中，狀態歷史記錄很正常。 這里唯一的問題是條件條件不會將元素隱藏在錯誤狀態。

UPDATE。 之所以進行這種奇怪的渲染，是因為同一組件中的動態循環渲染了另一個組件，而與標志值無關。 很難確定的是，它是在map中渲染它並傳遞動態字符串內容的索引。 無論如何，謝謝大家，對於可能引起誤解的問題深表歉意。

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> 

單擊切換，將顯示數據。