如何解决如何在React和React-router中解析未定义的匹配道具
当我单击到<Link to={"/weather/" + loc.id} onClick={props.findCurrentWeather}>
组件中的SearchBar
时。我收到错误消息:
无法读取未定义的属性“ params”
我的App.js
类组件:
class App extends Component {
state = {
locations: undefined,current: undefined,...
}
findCurrentWeather = async () => {
let id = this.props.match.params.id; //this is the concerned line. My applicatioon stops here
const data = await fetch(`https://api.weather.com/v1/current.json?key=${api_key}&q=${id}`);
const current_weather = await data.json();
console.log(current_weather);
}
render() {
return (
<BrowserRouter>
<Navbar />
<SearchBar locations={this.state.locations} findCurrentWeather={this.findCurrentWeather} />
<Breadcrumb />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/weather/:id" component={Home} /> //This is the route
<Route path="/about" component={About} />
</Switch>
</BrowserRouter>
)
} // render
} // class
SearchBar
功能组成部分:
const SearchBar = (props) => {
const searchResult = props.locations ? (
props.locations.map((loc) => {
return (
<li className="search-item" key={loc.id}>
<Link to={"/weather/" + loc.id} onClick={props.findCurrentWeather}> //I call the function from App.js here
<span id="city">{loc.name}</span>
</Link>
</li>
) // return
})
) :
(<li className="search-item">
<Link to={"#"}>
<span>No result</span>
</Link>
</li>);
return (
<form onSubmit={props.searchLocation}>
<input type="text" name="search" id="searchInput" className="search-input"/>
<div className="search-result">
<ul className="search-list" id="searchList">
{searchResult}
</ul>
</div>
</div>
</form>
)
} //fun
export default SearchBar;
我不知道为什么props
中的this.props.match.params.id
是undefined
解决方法
您的组件需要匹配作为道具,您需要通过它。 Route组件的render prop具有一个将prop作为第一个参数传递的函数。比赛是路线给您的道具之一。例如-
const App = () => (
<div>
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/weather/:id" render={ ({match}) => <Home id={match.params.id}/> } /> //This is the route
<Route path="/about" component={About} />
在您的示例中,由于id参数是在到Home组件的路由中传递的,因此SearchBar必须位于Home组件内。
您可能需要检查此link,以更好地了解match参数在react-router中的工作方式。
,所以事情是您的页面在第一次id为null时呈现两次,而第二次具有值。如果您console.log(props.match)它将向您显示该对象。 因此,要跳过此错误,您可以使用ternery运算符,这样您的id便会在加载后等于一个值。
const id = props.match ? props.match.params.id : null
console.log(id);
,
这里的问题是函数this
中findCurrentWeather
的上下文。由于它是一个箭头函数,因此它包含定义它的组件实例,而不是调用组件的实例。详细了解差异here。
现在,您有两个选择:
- 您将方法定义移至SearchBar组件。
- 将findCurrentWeather方法作为普通的javascript函数,如下所示。
async function findCurrentWeather () {
let id = this.props.match.params.id; //this is the concerned line. My applicatioon stops here
const data = await fetch(`https://api.weather.com/v1/current.json?key=${api_key}&q=${id}`);
const current_weather = await data.json();
console.log(current_weather);
}
,
您需要使用withRouter
包装组件,以便能够从Route
以外的组件中访问路由器并在SearchBar组件内部移动findCurrentWeather
。
// Searchbar.js
import { withRouter } from "react-router";
...
export default withRouter(SearchBar);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。