開発プロセスのコードは次のようになります
render() {
//只有路由组件才可以获取path,这时就需要withRouter
const path = this.props.location.pathname
const {
navList} =this.props
return(
<TabBar className="footer-bottom">
{
navList.map((nav)=><Item
key = {
nav.path}
title={
nav.text}
icon={
{
uri:require("./images/"+nav.icon+".png")}}
selectedIcon={
{
uri:require("./images/"+nav.icon+"-selected.png")}}
selected={
path===nav.path}
//下面就是产生错误的地方
onPress={
this.props.history.replace(nav.path)}
/>)
}
</TabBar>
ブラウザ
は次のようにエラーを報告します。一般的な意味は、setstateを繰り返すことです。その理由は、Reactがページを初めてレンダリングするときに(this.props.history.replace(nav.path))メソッドを実行し、このメソッドを実行するとページが再レンダリングされるため、スタックは繰り返し実行すると崩壊します。そのため、プロジェクトを実行するときに、コードをクリックした後ですぐに実行する必要はありません。これには、括弧を追加する場合と関数を追加しない場合の違いが含まれます。
ポータルjsに括弧を追加する必要があるかどうかの問題バインディング機能
2つの解決策があります
1.ES6矢印関数を使用します
onPress={
()=>this.props.history.replace(nav.path)}
2.別のメソッドを記述してから、メソッド名を渡します(これは単なる記述方法ですが、パラメーターが異なるため、パラメーターを変更する必要があります)
MyOnPress=()=>{
this.props.history.replace(this.props.nav.path)
}
onPress={
this.MyOnPress}
記事に誤りがある場合は、批判して訂正することを歓迎し、それについて議論することを歓迎します。