React:组件仅在按钮的第二onClick上呈现新值

达姆蒂波

我制作了一个React应用,并且我有一个父组件Search,而子组件InputResultInput具有下拉菜单,其传递的值,genreValueSearch一个按钮被点击时,通过一个回调函数。然后搜索进行api调用,效果很好。

我的问题是,单击两次按钮即可呈现新的API数据。查看其他SO问题,我怀疑我需要将其genreValue作为参数传递给cb函数,否则我的onClick只是初始化,而不是在第一次单击时调用它。

这是一个非常简单的应用程序,因此我认为不需要Flux等。我的控制台日志似乎显示在SearchInput组件中更改的值那我在做什么错?

Search.js

let Search = React.createClass ({
  getInitialState(){
    return {
      movies: ['Men In Black'],
      genreValue: '12'
    };
  },

  componentDidMount(){
    this.getMovies()
  },

  getMovies(){
    let genre = this.state.genreValue;
    let url = `http://api.themoviedb.org/3/discover/movie?${key}&with_genres=${genre}`;
    Request.get(url).then((response) => {
      console.log('response.body.results', response.body.results)
      this.setState({
        movies: response.body.results.map(function(movie){
          return movie.title
        })
      });
    });
  },

  handleGenre(newGenre) {
    this.setState({ genreValue: newGenre })
    return this.getMovies();
  },

  render(){
      console.log(this.state.movies)
      console.log('genreValue state', this.state.genreValue)
      return (
        <div>
          <Input genre={this.state.genreValue} onGenreChanged={this.handleGenre}/>
          <ul>
            {this.state.movies.map( function(movie){
              return <Results key={movie.id} data={movie}/>;
            })}
          </ul>
        </div>
      );
  }

});

export default Search;

Input.js

let Input = React.createClass ({

  selectHandler(){
    return this.props.onGenreChanged(this.refs.genre.value);
  },

  render() {
    console.log('genreValue prop', this.props.genre);
    console.log('refs', this.refs.genre)
      return <div>
      <select ref="genre">
        <option value="28">Action</option>
        <option value="12">Adventure</option>
        <option value="16">Animation</option>
        <option value="35">Comedy</option>
        <option value="80">Crime</option>
        <option value="99">Documentary</option>
        <option value="18">Drama</option>
        <option value="10751">Family</option>
        <option value="14">Fantasy</option>
        <option value="10769">Non-english</option>
        <option value="36">History</option>
      </select>

      <button onClick={this.selectHandler} value="Go">Go</button>
      </div>
    }
});

export default Input;
本·尼伯格

handleGenre函数中,this.getMovies调用时状态可能没有更新您可以将其更改为以下内容:

handleGenre(newGenre) { this.setState({ genreValue: newGenre }, function() { return this.getMovies(); }); },

或者,可能是更好的做法是调用this.getMoviescomponentDidUpdate,如果生命周期的功能genreValue发生了变化:

componentDidUpdate: function(prevProps, prevState) { if (prevState.genreValue !== this.state.genreValue) { this.getMovies(); } }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类常见问题

追加新的React组件onclick

来自分类Dev

React,onClick仅在第二次单击,Axios,Async / Await之后才能工作

来自分类Dev

在textview上的Onclick事件(具有TextIsSelectable =“ true”)仅在第二次单击时调用

来自分类Dev

onClick不会呈现新的react组件。

来自分类Dev

React组件仅在第二个onClick事件上更改状态

来自分类Dev

Django-表单仅在按钮上不显示

来自分类Dev

在按钮上添加行按React

来自分类Dev

仅在第二次Asp.NET c#之后,OnClick按钮才能工作

来自分类Dev

在按钮上加载新组件单击在ReactJs中?

来自分类Dev

单击提交按钮后无法获取COOKIE值,仅在第二次单击后有效

来自分类Dev

仅在按钮onclick后如何执行脚本?

来自分类Dev

追加新的React组件onclick

来自分类Dev

React,onClick仅在第二次单击,Axios,Async / Await之后才能工作

来自分类Dev

数据在按钮onClick事件上更新两次

来自分类Dev

React组件仅在我的对象中呈现一项

来自分类Dev

React:在第一个功能组件被更新时呈现第二个功能组件

来自分类Dev

如何将arraylist放在按钮onclick方法上?

来自分类Dev

在按钮/链接的onclick上执行PHP代码?

来自分类Dev

如何隐藏第二个按钮并仅在按下第一个按钮时显示它?

来自分类Dev

jQuery仅在先前div的文本框值不为空的情况下,在按钮单击上添加新的div

来自分类Dev

在按钮单击上隐藏并显示第二个表单

来自分类Dev

尝试在按钮单击时旋转div,但仅在第二次单击时有效(使用Javascript)

来自分类Dev

在按钮onclick上更改glyphicon

来自分类Dev

在按钮上添加行按React

来自分类Dev

仅在第二次Asp.NET c#之后,OnClick按钮才能工作

来自分类Dev

React 路由器:新组件仅在现有视图上呈现

来自分类Dev

React Router 不会在子组件的路由上呈现新组件

来自分类Dev

分页组件未在 UI 上呈现 - React

来自分类Dev

Javafx:在按钮上单击打开第二个选择窗口

Related 相关文章

  1. 1

    追加新的React组件onclick

  2. 2

    React,onClick仅在第二次单击,Axios,Async / Await之后才能工作

  3. 3

    在textview上的Onclick事件(具有TextIsSelectable =“ true”)仅在第二次单击时调用

  4. 4

    onClick不会呈现新的react组件。

  5. 5

    React组件仅在第二个onClick事件上更改状态

  6. 6

    Django-表单仅在按钮上不显示

  7. 7

    在按钮上添加行按React

  8. 8

    仅在第二次Asp.NET c#之后,OnClick按钮才能工作

  9. 9

    在按钮上加载新组件单击在ReactJs中?

  10. 10

    单击提交按钮后无法获取COOKIE值,仅在第二次单击后有效

  11. 11

    仅在按钮onclick后如何执行脚本?

  12. 12

    追加新的React组件onclick

  13. 13

    React,onClick仅在第二次单击,Axios,Async / Await之后才能工作

  14. 14

    数据在按钮onClick事件上更新两次

  15. 15

    React组件仅在我的对象中呈现一项

  16. 16

    React:在第一个功能组件被更新时呈现第二个功能组件

  17. 17

    如何将arraylist放在按钮onclick方法上?

  18. 18

    在按钮/链接的onclick上执行PHP代码?

  19. 19

    如何隐藏第二个按钮并仅在按下第一个按钮时显示它?

  20. 20

    jQuery仅在先前div的文本框值不为空的情况下,在按钮单击上添加新的div

  21. 21

    在按钮单击上隐藏并显示第二个表单

  22. 22

    尝试在按钮单击时旋转div,但仅在第二次单击时有效(使用Javascript)

  23. 23

    在按钮onclick上更改glyphicon

  24. 24

    在按钮上添加行按React

  25. 25

    仅在第二次Asp.NET c#之后,OnClick按钮才能工作

  26. 26

    React 路由器:新组件仅在现有视图上呈现

  27. 27

    React Router 不会在子组件的路由上呈现新组件

  28. 28

    分页组件未在 UI 上呈现 - React

  29. 29

    Javafx:在按钮上单击打开第二个选择窗口

热门标签

归档