反应警告计算匹配某些案例问题?

Question

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

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

来自 React doc

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

在<Switch>组件中，您将看到以下行。

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

在这种情况下，child是你的<div></div>，所以一个非标准的道具computedMatch被传递给原生的dom节点<div>，因此React给你一个健康的警告。因此，使用<>或<Fragment>将丢弃警告。

Answer 2

正如其他人所说，问题来自直接在<Switch>元素内部有一个<div>。 从<Switch>的文档：

<Switch>的所有子元素都应是<Route>或<Redirect>元素。

因此，虽然您显然可以通过将元素包装在片段标签中来摆脱此错误，但将其包装在<Route>元素中更符合预期用法。

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

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

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

Answer 5

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

Answer 6

在我的例子中，容器正在创建一个错误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>
</>