Question

    import React from 'react';
    import fetch from 'isomorphic-fetch';
    import { lookup } from 'dns';

    export default class Pagination extends React.Component {

        constructor(props){
            super(props);
            this.state = {
                contacts : [],
                per:5,
                page:1,
                totalPages:null,
                country:null
            }

        }


        componentDidMount(){
            document.getElementById('us').click()
        }

        handleCountry = (country=null) => {
            const {per, page, contacts} = this.state;
            if (country === null){
                country = 'United States'
            }
            const url = `http://127.0.0.1:8000/api/users/?limit=${per}&page=${page}&country=${country}`
            fetch(url)
            .then(response => response.json())
            .then(
                json => {
                    this.setState({
                        contacts:json.data
                    })
                }
            )
        }

        loadMore = (country) => {
            this.setState(prevState => ({
                page: prevState.page + 1,
            }), this.loadContacts(country))
        }

        handleCountry = (event) => {
            this.setState({
                country:event.target.value,
                page:1
            })
            this.loadContacts(event.target.value);    
        }

        render(){
            return (
                <div>
                    <div>

                        <label class="radio-inline">
                            <input type="radio" id="us" name="country" value="United States" onClick={this.handleCountry} />United States
                        </label>
                        <label class="radio-inline">
                            <input type="radio" id="india" name="country" value="India" onClick={this.handleCountry} />India
                        </label>
                        <label class="radio-inline">
                            <input type="radio" id="canada" name="country" value="Canada" onClick={this.handleCountry} />Canada
                        </label>

                    </div>
                    <ul className="contacts" style={{ width:'300px' }}>
                        {
                            this.state.contacts.map(contact => 
                                <li key={contact.id} style={{ padding:'5px 5px 5px 5px' }}>
                                    <div className="contact" style={{ background:'#0099ff', padding:'10px', color:'white' }}>
                                        <div>{ contact.id }</div>
                                        <div>{ contact.country }</div>
                                        <div>{ contact.name }</div>
                                    </div>
                                </li>
                            )
                        }
                    </ul>
                    <button onClick={() => this.loadMore(this.state.country)}>Load More</button>
                </div>
            )
        }
    }

在这里，我陷入了reactjs的问题。

当我单击任何单选按钮时，其调用 handleCountry（）方法和传递事件。然后我将事件存储在状态中。然后调用 handleCountry（）函数以获取api。

但是首先在 handleCountry（）方法中调用 loadContacts（）方法，然后将数据存储为状态。

所以我没有得到正确的结果。

在成功在 loadContacts（）方法内以状态存储数据之后，我可以拨打 loadContacts（）。

请看看。

Answer 1

使用带有setState的回调方法来达到预期的结果，将在状态更新成功后执行。

赞：

handleCountry = (event) => {
  let { value } = event.target;
  this.setState({
    country: value,
    page:1
  }, () => {
    this.loadContacts(value);
  })
}

检查React Doc，了解有关setState的更多详细信息。

在React中成功存储数据后如何调用方法

1 个答案: