【问题标题】:react warning computedMatch regarding some case issues?对某些案例问题做出反应警告计算匹配?
【发布时间】:2019-01-28 23:39:58
【问题描述】:

我有名为 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)

我不明白天气是案例问题还是什么,因为我在很多地方都读过它,但得到的答案却不同。上面粘贴的只是主页组件。

【问题讨论】:

  • 显示Homepage组件。
  • 上面发布的只是主页组件。请检查更新的问题。
  • 好的.. 阅读此blog。它有你的答案.. :) 那些&lt;div&gt;&lt;Switch&gt; 内部的罪魁祸首,使用Fragment 来解决问题。
  • 开关上面不需要
    。也在 Switch 内部。
  • @RaviTeja 他需要一些东西,但不是&lt;div&gt; 或任何html dom。但&lt;&gt;&lt;Fragement&gt; 会解决这个问题。

标签: node.js reactjs redux react-redux


【解决方案1】:

来自 React doc

如果您尝试渲染 DOM,将触发 unknown-prop 警告 带有一个未被 React 识别为合法 DOM 的 prop 的元素 属性/属性。你应该确保你的 DOM 元素不 有虚假的道具漂浮在周围。

&lt;Switch&gt; 组件中,您将看到以下行。

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

在这种情况下,child 是你的&lt;div&gt;&lt;/div&gt;,所以一个非标准的 props computedMatch 被传递给原生 dom 节点 &lt;div&gt;,因此 React 会给你一个健康的警告。因此,使用&lt;&gt;&lt;Fragment&gt; 将丢弃警告。

【讨论】:

  • 您能否对您的解决方法提供更多解释?
  • 为我工作。谢谢:)
【解决方案2】:

我解决了这个问题 remove 标签内的&lt;div&gt; 标签。或替换 &lt;div&gt;&lt;React.Fragment&gt;

在这种情况下:

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);

【讨论】:

    【解决方案3】:

    正如其他人所说,问题出在 &lt;div&gt; 直接位于 &lt;Switch&gt; 元素内。来自documentation for &lt;Switch&gt;

    &lt;Switch&gt; 的所有子元素都应该是 &lt;Route&gt;&lt;Redirect&gt; 元素。

    因此,虽然您显然可以通过将元素包装在片段标记中来消除此错误,但将其包装在 &lt;Route&gt; 元素中更符合预期用途。

    没有道具的&lt;Route&gt; 应该提供预期的行为。

    【讨论】:

      【解决方案4】:

      解决方法很简单,在&lt;Switch&gt;之后再加一层&lt;React.Fragment&gt;就可以了。希望对您有所帮助。

      【讨论】:

        【解决方案5】:

        我遇到了react-router-dom 的这个问题,因为我在我的Switch 中放置了一个div。相反,我将div 移到了Switch 之外,错误就消失了。

        【讨论】:

          【解决方案6】:

          在我的例子中,Container 正在创建一个错误 ComputedMatch:

          return (
              <>
                  <SearchAppBar/>
                  <Switch>
                      <Container sx={{ mt: '3rem', maxWidth:'95%'  }} maxWidth={false}  >
                          <Route path='/questionlist' render ={() =>  <QuestionList/> }/>
                          <Route path='/newquestion' render ={() =>  <CreateQuestion/> }/>
                          <Route path='/basequestion' render ={() =>  <BaseQuestion/> }/>
                          <Redirect to = '/questionlist' />
                      </Container>
          
                  </Switch>
          
              </>
          

          我这样做了,一切正常:

          return (
              <>
                  <SearchAppBar/>
                  <Container sx={{mt: '3rem', maxWidth: '95%'}} maxWidth={false}>
                      <Switch>
          
                          <Route path='/questionlist' render={() => <QuestionList/>}/>
                          <Route path='/newquestion' render={() => <CreateQuestion/>}/>
                          <Route path='/basequestion' render={() => <BaseQuestion/>}/>
                          <Redirect to='/questionlist'/>
          
          
                      </Switch>
                  </Container>
              </>
          

          【讨论】:

            猜你喜欢
            相关资源
            最近更新 更多
            热门标签