在React中更新狀態后清除DOM元素

Question

您好，我正在嘗試對頁面執行身份驗證邏輯。 我遇到的問題是，更新頁面狀態后，它沒有刪除經過身份驗證的內容。 如何清除元素？

我正在嘗試使用三元運算符，它確實可以工作。 但是，當用戶登錄或注銷時，它不會更新。 它只渲染一次，然后再坐在那里。

header.js

import React, { Component } from 'react';

import LoginHeader from './auth_logic/login_header';
import PublicHeader from './auth_logic/public_header';

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {isAuth: false};
  }

  render() {
    if (Meteor.userId) {
      this.setState({isAuth: !this.state.isAuth});
    }
    else {
      this.setState({isAuth: !this.state.isAuth});
    }

    return (
      <div>
        {this.state.isAuth ? <PublicHeader /> : <LoginHeader />}
      </div>
    );
  }
}

這是我的LoginHeader，當用戶通過身份驗證時，它將顯示其他信息，以及導航身份驗證的鏈接。

auth_logic / login_header.js

import React, { Component } from 'react';

import Accounts from '../accounts';

export default class LoginHeader extends Component {
  render() {
    return (
      <div className="nav navbar-default">
        <a className="navbar-brand">Nick Reviews</a>

        <ul className="nav navbar-nav">
          <li>
            <a href="#">
              To Watch
              <span className="badge margin-left-3px">0</span>
            </a>
          </li>
          <li>
            <a href="#">
              Reviews
              <span className="badge margin-left-3px">0</span>
            </a>
          </li>
          <li>
            <Accounts />
          </li>
          <li><a href="#"> Create new item </a></li>
        </ul>
      </div>
    );
  }
}

它與login_header.js文件完全相同，但是信息較少。

auth_logic / public_header.js

import React, { Component } from 'react';

import Accounts from '../accounts';

export default class PublicHeader extends Component {
  render() {
    return (
      <div className="nav navbar-default">
        <a className="navbar-brand">Nick Reviews</a>

        <ul className="nav navbar-nav">
          <li>
            <a href="#">
              To Watch
              <span className="badge margin-left-3px">0</span>
            </a>
          </li>
          <li>
            <a href="#">
              Reviews
              <span className="badge margin-left-3px">0</span>
            </a>
          </li>
          <li>
            <Accounts />
          </li>
        </ul>
      </div>
    );
  }
}

Answer 1

假設您的userId是上面的道具，請使用componentWillReceiveProps()反應生命周期方法來更新狀態，具體取決於您的道具。 有關更多信息，請參閱此鏈接-https://reactjs.org/docs/react-component.html

Answer 2

標頭組件不應在內部保持isAuth狀態，它應來自容器組件，例如Home / About（Router Page）...根據prop更改呈現條件。