Сбросить состояние при смене реквизита

Question

Итак, у меня есть три компонента (Search, Pages, HanddlesApi) плюс App.js, и я передаю реквизиты через функции другим дочерним компонентам без проблем.

Компонент Search передает свое состояниеuserInput для компонента HandleApi и обновляет API, используя componentDidUpdate. (это прекрасно работает, np здесь).

Я добавил компонент Pages, чтобы обновить номер страницы API, чтобы пользователь мог переходить между страницами контента. Это работает, но с проблемами. Пользователь может выполнять поиск и циклически обрабатывать страницы, но если они введут новый запрос, они окажутся на том же номере страницы нового запроса. Например, если я искал «утки» и переходил на следующую страницу (2). Затем выполнил поиск «собак», которые попадали бы на вторую страницу «собак»

Поэтому мой вопрос заключается в том, как сбросить состояние для моего компонента «Страницы», только когда пользователь вводит новый запрос?

Я видел, что componentWillReceiveProps устарел, поэтому я не могу его использовать. getDerivedStateFromProps показалось, что это может быть хорошей идеей, но из того, что я прочитал, его следует использовать только в редких случаях.

Итак, два наиболее вероятных варианта - это использовать componentDidUpdate так, как я этого не делаю. понимать или использовать ключ?

В общем, я просто не понимаю, что делать

В моем компоненте HanddlesApi я передаю следующее в API:

q: this.props.inputValue ? this.props.inputValue : 'news',
page: this.props.pageNum ? this.props.pageNum: 0

затем ..

  componentDidMount() {
        this.fetchNews()
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.props.inputValue !== prevProps.inputValue || this.props.pageNum !== prevProps.pageNum) {
            this.setState({
                news: []
            }, this.fetchNews);
        }
    }

Затем в моем компоненте страниц у меня есть

import React, { Component } from 'react'


class Pages extends Component {
    constructor(props) {
        super(props)
        this.state = {
            nextPage: 1,
            prevPage: 0

        }

    }
    handleNextClick = () => {
        this.setState({
            nextPage: this.state.nextPage + 1,
        })
    }

    handlePrevClick = () => {
        this.setState({
            prevPage: this.state.prevPage - 1,

        })
    }

    render() {
        return (
            <div className='pageNav'>
                <button className="PrevButton" onClick={() => {
                    this.handlePrevClick()
                    this.props.onNextButtonClick(this.state.prevPage)
                }}>Previous </button>

                <button className="nextButton" onClick={() => {
                    this.handleNextClick()
                    this.props.onNextButtonClick(this.state.nextPage)
                }}>Next </button>
            </div>
        )
    }

}

export default Pages

Компонент поиска

import React, { Component } from 'react';

class SearchBar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            inputValue: ""
        }
    }
    handleChange = (e) => {
        this.setState({
            inputValue: e.target.value
        })
    }

    handleSubmit = (e) => {
        e.preventDefault()
        this.props.onSubmittedSearch(this.state.inputValue)
    }

    render() {
        //{this.props.onSubmittedSearch(this.state.inputValue)} 
        return (
            <section>
                <form onSubmit={this.handleSubmit}>
                    <label htmlFor="searching"></label>
                    <input type="text" placeholder="Search Something" value={this.state.inputValue} onChange={this.handleChange} />
                    <button type="submit">Search </button>
                </form>

            </section>
        )
    }

}

export default SearchBar

App.js

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputValue: null,
      pageNum: 1

    }
  }
  // used to pass props from SearchBar to NewsList
  onSubmittedSearch = (inputValue) => {
    this.setState({
      inputValue: inputValue
    })
  }
  onNextButtonClick = (pageNum) => {
    this.setState({
      pageNum: pageNum

    })
  }



  render() {
    return (
      <main>


        <SearchBar onSubmittedSearch={this.onSubmittedSearch} />


        <NewsList inputValue={this.state.inputValue} pageNum={this.state.pageNum} />


        <Pages onNextButtonClick={this.onNextButtonClick} />
        <Footer />


      </main>
    )
  }
}

export default App;

Answer 1

Вы должны позволить приложению отвечать за изменение и удержание номера текущей страницы. Таким образом, вы можете сбросить его каждый раз, когда ваш компонент поиска отправлять. Вот рабочий пример:

class Pages extends React.Component {
    render() {
        return (<div className='pageNav'>
            <button disabled={this.props.page <= 1} className="PrevButton" onClick={this.props.onPrevButtonClick}>Previous
            </button>
            <span>{this.props.page}</span>
            <button className="nextButton" onClick={this.props.onNextButtonClick}>Next
            </button>
        </div>)
    }

}

class SearchBar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            inputValue: ""
        }
    }
    handleChange = (e) => {
        this.setState({inputValue: e.target.value})
    }

    handleSubmit = (e) => {
        e.preventDefault()
        this.props.onSubmittedSearch(this.state.inputValue)
    }

    render() {
        //{this.props.onSubmittedSearch(this.state.inputValue)}
        return (<section>
            <form onSubmit={this.handleSubmit}>
                <label htmlFor="searching"></label>
                <input type="text" placeholder="Search Something" value={this.state.inputValue} onChange={this.handleChange}/>
                <button type="submit">Search
                </button>
            </form>

        </section>)
    }

}

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            inputValue: null,
            pageNum: 1

        }
    }
    // used to pass props from SearchBar to NewsList
    onSubmittedSearch = (inputValue) => {
        this.setState({inputValue: inputValue, pageNum: 1})
    }
    onNextButtonClick = () => {
        this.setState(state => ({
            pageNum: state.pageNum + 1
        }))
    }
    onPrevButtonClick = (pageNum) => {
        this.setState(state => ({
            pageNum: Math.max(state.pageNum - 1, 1)
        }))
    }

    render() {
        return (<main>
            <SearchBar onSubmittedSearch={this.onSubmittedSearch}/>
            <Pages onNextButtonClick={this.onNextButtonClick} onPrevButtonClick={this.onPrevButtonClick} page={this.state.pageNum}/>
        </main>)
    }
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>