Question

我有名为isAuthenticated的道具，它还显示某些情况警告在控制台中仍然存在。请检查一下。

import React,{Component} from "react";
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import LogoutHome from './Logout_Home';
import SignIn from '../Components/SignIn';
import jwt_decode from 'jwt-decode';
import {setCurrentUser} from '../actions/authActions';
import SignUp from '../Components/SignUp';
import setAuthToken from '../util/setAuthToken';
import AboutUs from '../containers/AboutUs';
import store from '../store';
import {connect} from "react-redux";
// check for TOKEN
if (localStorage.jwtToken) {
  // Set auth token header auth
  setAuthToken(localStorage.jwtToken);
  // Decode token and get user info and exp
  const decoded = jwt_decode(localStorage.jwtToken);
  // Set user and isAuthenticated
  store.dispatch(setCurrentUser(decoded));

  // Check for expired token
  const currentTime = Date.now() / 1000;
  if (decoded.exp < currentTime) {
    // Logout user
    store.dispatch(logoutUser());

    // Redirect to login
    window.location.href = '/login';
  }
}
class HomePage extends Component
{
  componentDidMount(){
    console.log(this.props.auth.isAuthenticated);
  }
    render(){
      var {
        isAuthenticated
      } = this.props.auth;
      return(
        <div>
          <Router>
            <div>
              <Switch>
                {this.props.auth.isAuthenticated===false ? (
                  <div>
                  <Route exact path='/' component={LogoutHome}/>
                  <Route  path='/Finance/Login' component={SignIn}/>
                  <Route  path='/Finance/AboutUs' component={AboutUs}/>
                  <Route  path='/Finance/ContactUs' component={ContactUs}/>
                  <Route  path='/Finance/SignUp' component={SignUp}/>
                  <Route  path='/Finance/Forgotpassword' component={Forgotpassword}/>
                  </div>
                  ) : (
                    <div>
                  <Route  path='/Finance/Home' component={Home}/>
                  </div>
                  )}
              </Switch>
            </div>
          </Router>
        </div>
      );
    }
}
function mapStateToProps(state){
  return{
    auth : state.auth
  };
}
export default connect(mapStateToProps)(HomePage);

警告是这样的：

index.js:2178 Warning: React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `computedmatch` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (at Homepage.js:50)
    in Switch (at Homepage.js:48)
    in div (at Homepage.js:47)
    in Router (created by BrowserRouter)
    in BrowserRouter (at Homepage.js:46)
    in div (at Homepage.js:45)
    in HomePage (created by Connect(HomePage))
    in Connect(HomePage) (at App.js:10)
    in div (at App.js:9)
    in App (at index.js:10)
    in Provider (at index.js:9)

我不了解天气是案例问题还是因为我在很多地方都读过但得到的答案不同。上面粘贴的只是首页组件。

Answer 1

就像其他人所说的那样，问题出在<div>元素内部直接有一个<Switch>。来自documentation for <Switch>：

<Switch>的所有子代应为<Route>或<Redirect>元素。

因此，尽管您显然可以通过将元素包装在fragment标签中来消除此错误，但它与将其包装在<Route>元素中的预期用法更加一致。

没有道具的<Route>应该提供预期的行为。

Answer 2

从React doc

如果您尝试呈现DOM，则会触发unknown-prop警告带有道具的元素，该道具未被React识别为合法DOM 属性/属性。您应该确保您的DOM元素不周围有乱七八糟的道具。

在<Swtich>组件内，您将看到以下行。

React.cloneElement(child, { location, computedMatch: match })

在这种情况下，child是您的<div></div>，因此会将非标准道具computedMatch传递到本地dom节点<div>，因此React给您带来了健康警告。因此，使用<>或<Fragment>将丢弃警告。

Answer 3

我解决了标签内删除 <div>标签的问题。或用<div> 替换 <React.Fragment>。

在这种情况下：

import React,{Component} from "react";
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import LogoutHome from './Logout_Home';
import SignIn from '../Components/SignIn';
import jwt_decode from 'jwt-decode';
import {setCurrentUser} from '../actions/authActions';
import SignUp from '../Components/SignUp';
import setAuthToken from '../util/setAuthToken';
import AboutUs from '../containers/AboutUs';
import store from '../store';
import {connect} from "react-redux";
// check for TOKEN
if (localStorage.jwtToken) {
  // Set auth token header auth
  setAuthToken(localStorage.jwtToken);
  // Decode token and get user info and exp
  const decoded = jwt_decode(localStorage.jwtToken);
  // Set user and isAuthenticated
  store.dispatch(setCurrentUser(decoded));

  // Check for expired token
  const currentTime = Date.now() / 1000;
  if (decoded.exp < currentTime) {
    // Logout user
    store.dispatch(logoutUser());

    // Redirect to login
    window.location.href = '/login';
  }
}
class HomePage extends Component
{
  componentDidMount(){
    console.log(this.props.auth.isAuthenticated);
  }
    render(){
      var {
        isAuthenticated
      } = this.props.auth;
      return(
        <div>
          <Router>
            <div>
              <Switch>
                {this.props.auth.isAuthenticated===false ? (
                  <React.Fragment>
                  <Route exact path='/' component={LogoutHome}/>
                  <Route  path='/Finance/Login' component={SignIn}/>
                  <Route  path='/Finance/AboutUs' component={AboutUs}/>
                  <Route  path='/Finance/ContactUs' component={ContactUs}/>
                  <Route  path='/Finance/SignUp' component={SignUp}/>
                  <Route  path='/Finance/Forgotpassword' component={Forgotpassword}/>
                  </React.Fragment>
                  ) : (
                    <React.Fragment>
                  <Route  path='/Finance/Home' component={Home}/>
                  </React.Fragment>
                  )}
              </Switch>
            </div>
          </Router>
        </div>
      );
    }
}
function mapStateToProps(state){
  return{
    auth : state.auth
  };
}
export default connect(mapStateToProps)(HomePage);

Answer 4

我在// shared.module.ts @NgModule({ declarations: [SharedComponent], exports: [SharedComponent], providers: [SharedService] }) export class SharedModule {}上遇到了这个问题，因为我在react-router-dom内放置了一个div。相反，我将Switch移到了div之外，错误消失了。

Answer 5

解决方案很简单，只需在<React.Fragment>之后再添加一层<Switch>。希望对您有所帮助。

对某些案例问题做出警告警告compactMatch？

5 个答案: