javascript - React 点击处理函数在 2 次点击后开始工作

Question

我正在参与 FreeCodeCamp 的“Camper's Leaderboard”挑战。因此，我必须实现这样的事情:“我可以根据他们在过去 30 天内获得的布朗尼积分和他们总共获得的布朗尼积分对列表进行排序。”
我将 onclick 处理程序添加到列表的标题单元格中，但在两次单击该元素(而不是一次)后，它会更改 View 。简而言之:
_handlerAll() 和 _handler30() 在连续点击两次后执行，而不是一次。这是代码:

"use strict";
class TableBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            sortAllTime: true
        };
    }

    loadCampersFromServer() {
        let templateURL = 'https://fcctop100.herokuapp.com/api/fccusers/top/';
        let url = (this.state.sortAllTime) ? (templateURL + 'alltime') : (templateURL + 'recent');
        fetch(url)
            .then(
                (response) => {
                    if (response.status !== 200) {
                        console.log('Looks like there was a problem. Status Code: ${response.status}');
                        return;
                    }
                    response.json().then((data) => {
                        this.setState({data: data});

                    })
                }
            )
            .catch(function (err) {
                console.log('Fetch Error :-S', err);
            });
    }

    _handlerAll() {
        this.setState({sortAllTime: true});
        this.loadCampersFromServer();
        console.log('all');
    }

    _handler30() {
        this.setState({sortAllTime: false});
        this.loadCampersFromServer();
        console.log('notAll');
    }

    componentDidMount() {
        this.loadCampersFromServer();
    }

    render() {
        return <CampersList _data={this.state.data}
        _handlerAll={this._handlerAll.bind(this)} _handler30={this._handler30.bind(this)}/>;
    }
}

class CampersList extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let campersNodes = this.props._data.map((element, index) => {
            return (
                <Camper user={element} index={index}/>

            );
        });

        return (
            <table>
                <tr>
                    <th>#</th>
                    <th>Camper's Name</th>
                    <th onClick={this.props._handler30}>Points in past 30 days</th>
                    <th onClick={this.props._handlerAll}>All time points</th>
                </tr>
                {campersNodes}
            </table>
        )
    }
}

class Camper extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <tr>
                <td>{this.props.index + 1}</td>
                <td>
                    <img src={this.props.user.img} alt="logo"/>
                    <span>{this.props.user.username}</span>
                </td>
                <td>{this.props.user.recent}</td>
                <td>{this.props.user.alltime}</td>
            </tr>
        )
    }
}

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

div#root {
  margin: 0 auto;
  width: 50%; }

img {
  width: 32px; }

span {
  padding: 20px 5px; }

table {
  font-family: 'Arial';
  margin: 25px auto;
  border-collapse: collapse;
  border: 1px solid #eee;
  border-bottom: 2px solid #ccc0b8;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05); }
  table tr:hover {
    background: #f4f4f4; }
    table tr:hover td {
      color: #555; }
  table tr th, table tr td {
    color: #999;
    border: 1px solid #eee;
    padding: 12px 35px;
    border-collapse: collapse; }
  table tr th {
    background: #619d9f;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px; }
    table tr th.last {
      border-right: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 1

这部分docs相关:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

这正是您正在做的事情:您正在调用 this.setState({sortAllTime: true}); 并立即访问 中的 this.state.sortAllTime loadCampersFromServer。但这会返回旧值。因此，即使最终状态被更新，您加载的数据也是“旧”数据。只有下一次(第二次)点击才会加载您期望的数据。

<小时/>

相反，将 sortAllTime 的值传递给 loadCampersFromServer 并将 sortAllTime 的状态值与 data 一起设置:

loadCampersFromServer(sortAllTime) {
  // perform Ajax request to get `data` for `sortAllTime`
  // ...
  this.setState({sortAllTime, data});
  // ...
}

<小时/>

"use strict";
class TableBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            sortAllTime: true
        };
    }

    loadCampersFromServer(sortAllTime) {
        let templateURL = 'https://fcctop100.herokuapp.com/api/fccusers/top/';
        let url = sortAllTime ? (templateURL + 'alltime') : (templateURL + 'recent');
        fetch(url)
            .then(
                (response) => {
                    if (response.status !== 200) {
                        console.log('Looks like there was a problem. Status Code: ${response.status}');
                        return;
                    }
                    response.json().then((data) => {
                        this.setState({data, sortAllTime});

                    })
                }
            )
            .catch(function (err) {
                console.log('Fetch Error :-S', err);
            });
    }

    _handlerAll() {
        this.loadCampersFromServer(true);
    }

    _handler30() {
        this.loadCampersFromServer(false);
    }

    componentDidMount() {
        this.loadCampersFromServer();
    }

    render() {
        return <CampersList _data={this.state.data}
        _handlerAll={this._handlerAll.bind(this)} _handler30={this._handler30.bind(this)}/>;
    }
}

class CampersList extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        let campersNodes = this.props._data.map((element, index) => {
            return (
                <Camper user={element} index={index}/>

            );
        });

        return (
            <table>
                <tr>
                    <th>#</th>
                    <th>Camper's Name</th>
                    <th onClick={this.props._handler30}>Points in past 30 days</th>
                    <th onClick={this.props._handlerAll}>All time points</th>
                </tr>
                {campersNodes}
            </table>
        )
    }
}

class Camper extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <tr>
                <td>{this.props.index + 1}</td>
                <td>
                    <img src={this.props.user.img} alt="logo"/>
                    <span>{this.props.user.username}</span>
                </td>
                <td>{this.props.user.recent}</td>
                <td>{this.props.user.alltime}</td>
            </tr>
        )
    }
}

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

div#root {
  margin: 0 auto;
  width: 50%; }

img {
  width: 32px; }

span {
  padding: 20px 5px; }

table {
  font-family: 'Arial';
  margin: 25px auto;
  border-collapse: collapse;
  border: 1px solid #eee;
  border-bottom: 2px solid #ccc0b8;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.05), 0px 20px 20px rgba(0, 0, 0, 0.05), 0px 30px 20px rgba(0, 0, 0, 0.05); }
  table tr:hover {
    background: #f4f4f4; }
    table tr:hover td {
      color: #555; }
  table tr th, table tr td {
    color: #999;
    border: 1px solid #eee;
    padding: 12px 35px;
    border-collapse: collapse; }
  table tr th {
    background: #619d9f;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px; }
    table tr th.last {
      border-right: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>