对某些案例问题做出反应警告计算匹配？
Posted
技术标签:
【中文标题】对某些案例问题做出反应警告计算匹配？【英文标题】：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。它有你的答案.. :) 那些<div> 是<Switch> 内部的罪魁祸首，使用Fragment 来解决问题。
开关上面不需要。也在 Switch 内部。
@RaviTeja 他需要一些东西，但不是<div> 或任何html dom。但<> 或<Fragement> 会解决这个问题。
【参考方案1】：
来自 React doc
如果您尝试渲染 DOM，将触发 unknown-prop 警告 带有一个未被 React 识别为合法 DOM 的 prop 的元素 属性/属性。你应该确保你的 DOM 元素不 有虚假的道具漂浮在周围。
在<Switch> 组件中，您将看到以下行。
React.cloneElement(child, location, computedMatch: match )
在这种情况下，child 是你的<div></div>，所以一个非标准的 props computedMatch 被传递给原生 dom 节点 <div>，因此 React 会给你一个健康的警告。因此，使用<> 或<Fragment> 将丢弃警告。
【讨论】：
您能否对您的解决方法提供更多解释？ 为我工作。谢谢:)【参考方案2】：我解决了这个问题 remove 标签内的<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);
【讨论】：
【参考方案3】：正如其他人所说，问题出在 <div> 直接位于 <Switch> 元素内。来自documentation for <Switch>：
<Switch>的所有子元素都应该是<Route>或<Redirect>元素。
因此，虽然您显然可以通过将元素包装在片段标记中来消除此错误，但将其包装在 <Route> 元素中更符合预期用途。
没有道具的<Route> 应该提供预期的行为。
【讨论】：
【参考方案4】：解决方法很简单，在<Switch>之后再加一层<React.Fragment>就可以了。希望对您有所帮助。
【讨论】：
【参考方案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>
</>
【讨论】：
以上是关于对某些案例问题做出反应警告计算匹配？的主要内容，如果未能解决你的问题，请参考以下文章
做出反应。如何在没有警告的情况下将 Grid 插入 TabPanel？
对于 iO，我有一个 if / else 代码块，对 UISwitch 中的变化做出反应。在某些情况下如何将 uiswitch 设置回关闭？