Question

因此，我有三个组件（搜索，页面，HanddlesApi）以及App.js，并且我将通过函数将道具传递给其他子组件没有问题。

Search组件将其userInput的状态传递给HandleApi组件，并使用componentDidUpdate更新api。（效果很好，在这里是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);
        }
    }

然后在我的Pages组件中，我拥有

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

您应该让App负责更改和保持当前页码。因此，您可以在每次提交搜索组件时重置它。这是一个工作示例：

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>

重置道具状态

1 个答案: