Question

对于我的班级，我们正在使用React创建一个网站，而我或我的团队都无法弄清楚如何以可变状态呈现函数并使之动态

我的代码如下：

class App extends React.Component {
  constructor(props)
  {
    super(props)
    this.state = {
      screen: this.home(),
      movies: []
    }
  }
  home = () =>{
      this.state.movies.map((movie)=>{
        return(
          <div>
            <Popular
            title={movie.title}
            rating={movie.vote_average}
            poster={movie.poster_path}
            desc={movie.overview}
            />
          </div>
        )
      })
    }
  render(){
   return(
       <div>{this.state.screen}</div>
    )
  }
}

当我运行此错误时读取

TypeError: Cannot read property 'movies' of undefined

您可以假定状态电影中的变量充满了由API设置的电影阵列

编辑：我试图实现的最终结果是返回一个变量或状态，该变量或状态可以包含将要呈现的不同屏幕/页面的功能

Answer 1

如果您的movies数组中充满了来自任何API调用的数据，那么您可以直接使用该数组来呈现数据，

class App extends React.Component {
  constructor(props)
  {
    super(props)
    this.state = {
      movies: []
    }
  }

  render(){
   return(
       <div>
       {
        this.state.movies.map((movie)=>{
          return(
            <div>
            <Popular
            title={movie.title}
            rating={movie.vote_average}
            poster={movie.poster_path}
            desc={movie.overview}
            />
          </div>
        )
      })
      }
      </div>
    )
  }
}

Answer 2

这里的根本原因是this.state在构造函数中使用home()调用时未初始化。

无论哪种方式，都不应将呈现的内容存储在state中。

根据评论，这是一个重构，但是我建议改用像react-router这样的实际路由器。

const HomeView = ({ movies }) =>
  movies.map(movie => (
    <div>
      <Popular
        title={movie.title}
        rating={movie.vote_average}
        poster={movie.poster_path}
        desc={movie.overview}
      />
    </div>
  ));

const FavoritesView = ({ movies }) => <>something else...</>;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: [],
      view: "home",
    };
  }
  render() {
    let view = null;
    switch (this.state.view) {
      case "home":
        view = <HomeView movies={this.state.movies} />;
        break;
      case "favorites":
        view = <FavoritesView movies={this.state.movies} />;
        break;
    }
    return (
      <div>
        <a href="#" onClick={() => this.setState({ view: "home" })}>
          Home
        </a>
        <a href="#" onClick={() => this.setState({ view: "favorites" })}>
          Favorites
        </a>
        {view}
      </div>
    );
  }
}

如何动态设置渲染功能的变量状态

2 个答案: