React 未能在 componentWillMount() 内部调用的函数中设置状态

Question

我是新来的反应。我正在尝试使用_fetchUsers() 动态地从远程服务器获取数据。单击不同的导航选项卡时应更改状态 apiUrl，尽管此处未显示。问题，我发现$.ajax函数之前的日志显示this.state.apiurl的空字符串。如果我在 ajax 的 url 属性上对 url 进行硬编码，则 ajax 可以返回正确的响应。有人可以解释为什么我无法为 apiurl 设置状态，是与 componentWillMount() 相关的原因

export default class RegiteredUserTable extends Component {
    constructor() {
        super();
        this.state = {
            registeredUsers:[],
            tableProperties:[],
            apiUrl:''
        }
    }
    _fetchUsers() {
        console.log("this.props", this.props);
        if(this.props.match.params.tableId === "buyer-table"){
            this.setState({apiUrl:'/buyers/list-buyers'});
        } else if (this.props.match.params.tableId === "seller-table") {
            this.setState({apiUrl:'/sellers/list-sellers/'});
        }
        console.log('this.state.apiUrl',this.state.apiUrl);    
        $.ajax({
            method: 'GET',
            url: `${this.state.apiUrl}`,
            success: (res) => {
                console.log('res',res);
                let registeredUsers = res.data;
                this.setState({registeredUsers});
            }
        });
    }

    _getTableProperty() {
        //property array
        console.log('this.state.registeredUsers',this.state.registeredUsers);
        const tableProperties = this.state.registeredUsers[0].keys;
        this.setState({tableProperties});
        return tableProperties.map(tableProperty => {
            return  (
                        <th>{tableProperty}</th>
                    )
        })
    }

    _getUsers() {
        return this.state.registeredUsers.map(registeredUser => {
                return (
                    <tr>
                        <td>{registeredUser.id}</td>
                        <td>{registeredUser.first_name}</td>
                        <td>{registeredUser.last_name}</td>
                    </tr>
                );
            }
        )
    }
    componentWillMount() {
        this._fetchUsers();
    }
    render() {
        return(
            <div className="container">
                <div className="row">
                    <div className="col-xs-12">
                    <div className="table-responsive">
                        <table className="table table-bordered table-hover">
                        <caption className="text-center">Agents' data</caption>
                        <thead>
                            <tr>
                                {this._getTableProperty()}
                            </tr>
                        </thead>
                        <tbody>
                            {this._getUsers()}
                        </tbody>
                        <tfoot>
                            <tr>
                            <td colSpan="5" className="text-center">Data retrieved from <a href="http://www.infoplease.com/ipa/A0855611.html" target="_blank">infoplease</a> and <a href="http://www.worldometers.info/world-population/population-by-country/" target="_blank">worldometers</a>.</td>
                            </tr>
                        </tfoot>
                        </table>
                    </div>
                    </div>
                </div>
            </div>

        );
    }
}

Answer 1

SetState 是异步的，所以一旦setState 将apiUrl 设置在state 变量中，使用回调方法并在其中进行api 调用。

像这样写_fetchUsers：

_fetchUsers() {
    let tableId = this.props.match.params.tableId;

    this.setState({
        apiUrl: tableId === "buyer-table" ? '/buyers/list-buyers' : '/sellers/list-sellers/'
    }, () => {
         $.ajax({
            method: 'GET',
            url: `${this.state.apiUrl}`,
            success: (res) => {
                console.log('res',res);
                let registeredUsers = res.data;
                this.setState({registeredUsers});
            }
        });
    });       
}

或者更好的方法是将apiUrl 存储在一个变量中，并在收到响应后执行setState，这样您就不需要两次执行setState，也不需要依赖第一个setState。

像这样：

_fetchUsers() {
    let tableId = this.props.match.params.tableId;
    let url = tableId === "buyer-table" ? '/buyers/list-buyers' : '/sellers/list-sellers/';
    $.ajax({
        method: 'GET',
        url: url,
        success: (res) => {
            console.log('res',res);
            let registeredUsers = res.data;
            this.setState({registeredUsers, apiUrl: url});
        }
    });       
}