Question

我的react.js应用程序中有路由属性。当我第一次单击该路由时，它可以正常工作，但是如果我在页面中刷新，则会出现错误，提示无法读取属性... null。我正在从tmdb进行api调用。为什么刷新时出错？其次，除非我提到的第一条路线之外，否则我有另一条路线无法访问。我的意思是，当我将TvInfo放在MovieInfo tvinfo之上时，电影信息却不起作用。这样，只有movieinfo起作用。如果我先单击上面的route元素，然后单击tvinfo元素，我将再次在屏幕上获得上次单击的电影。我尝试过很多事情可能是什么问题？谢谢

val a = listOf("abc", "a", "bb", "aa", "aaa", "bb", "a")
val b = a.sortedWith(compareBy({ it.length }, { it }))
println(b)

Answer 1

您需要对Routes进行一些不同的设计，Route组件无法区分两个单独的参数。

class App extends Component {
    render(){
        return(
          <BrowserRouter>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="movie/:movie_id" component={MovieInfo} />
              <Route path="tv/:tv_id" component={TvInfo} />
            </Switch>
          </BrowserRouter>
        )
    }
}

export default App;

Answer 2

这是我的movieInfo组件

class MovieInfo extends React.Component{

 render(){


 return(
  <div>
    <p style={{marginLeft:'47%',fontSize:25}}>{this.props.selectedMovie.original_title}</p>
    <img  style={{marginLeft: '20%'}}
    src={`http://image.tmdb.org/t/p/w780${this.props.selectedMovie.backdrop_path}`} alt="moviebackdrop"/>
  <div style={{float:'right',marginRight:45}}>
    <p>Release Date: {this.props.selectedMovie.release_date}</p>
    <p>Vote: {this.props.selectedMovie.vote_average}<Icon name="star" color="yellow" /></p>
  </div>
    <p style={{width:800,marginLeft: '20%'}} >{this.props.selectedMovie.overview}</p>
    <p>{this.props.data.homepage}</p>
  </div>
)}
}

const mapStateToProps = (state) => {
return{
selectedMovie:state.movie.selectedMovie,
 }
}

为了能够显示此屏幕，我还有另一个组件可以在其中显示电影的图像。当我单击图像时，它将呈现movieInfo组件。这是我的图像组件。

 selectMovie = () => {
 this.props.setMovie(this.props.movie)
 }


render(){
return(
<Link to={"movie/" + this.props.movie.id}>
  <div onClick={() => this.selectMovie()}>
    <div className="item">
      <img className="img"
      src={`http://image.tmdb.org/t/p/w342${this.props.movie.backdrop_path}`} alt="moviebackdrop"/>
      <p className="title">{this.props.movie.original_title}</p>
      <p className="overview">{this.props.movie.overview}</p>
    </div>
  </div>
</Link>
)}
}

有一个具有路由和路由的React应用程序会在刷新时出错，这可能是什么原因？

2 个答案: