javascript - 为什么单击更改状态且与 ajax 调用无关的选项卡会创建该 ajax 调用？

Question

我有一个简单的布局。

有一个<StateSelector>在 <Navbar>单击它执行一个方法。

<StateSelector> 中该按钮的 innerHTML 值作为参数传递给作为 Prop 传递给它的函数。并且父级中存在的方法更改了 activeOption状态为All, Offline and online取决于点击的按钮。

现在，这个 parent 还有一个 child 叫<TwitchList> .这<TwitchList>的 render 方法包​​含 8 个用户名的数组，并且对 twitch.tv 进行了 8 次调用。获取这些 channel 的数据。

注意我没有链接<StateSelector>刚刚。它与$.ajax();没有互动在 <TwitchList>除了<TwitchList>和 <StateSelector>属于同一个 parent 。

为什么点击<StateSelector>里面的一个元素生成ajax调用？单击它一次会产生 8 次调用，这等于 usersList[] 中的用户数。

我已经尝试搜索这个问题，并且我已经尝试解决了大约 4 天，但我只是不明白为什么会这样。

var Navbar = React.createClass({
render: function () {
    return (
        <div className="navbar">
            <h1 className="header">TWITCH STREAMERS</h1>
            <StateSelector changeActiveOption={this.props.changeActiveOption}/>
        </div>
    );
}
});

var StateSelector = React.createClass({
changeOption: function (e) {
    this.props.changeActiveOption(e.target.innerHTML.toLowerCase());
},
render: function () {
    return (
        <div className="selectorList">
            <div  className="selector" onClick={this.changeOption}>ALL</div>
            <div className="selector" onClick={this.changeOption}>ONLINE</div>
            <div className="selector" onClick={this.changeOption}>OFFLINE</div>
        </div>
    );
}
});
var TwitchList = React.createClass({
render: function () {
    var userslist = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    var finalList = [];
    function makeURL(user, type) {
        return "https://api.twitch.tv/kraken/" + type + "/" + user;
    }
    userslist.forEach(function (user) {
        $.ajax({
            url: makeURL(user, "streams"),
            dataType: 'jsonp',
            success: function (data) {
                function getID(data) {
                    if (data.stream) {
                        return data.stream._id;
                    } else {
                        return Math.random();
                    }
                }
                function getImage(data) {
                    if (!data.stream) {
                        return "https://dummyimage.com/50x50/ecf0e7/5c5457.jpg&text=0x3F";
                    }
                    else {
                        return data.stream.preview.medium;
                    }
                }
                console.log(data);
                var id = getID(data);
                var preview = getImage(data);
                console.log(preview);
                finalList.push(
                    <li className="twitchUser" key={id}>
                        <img src={preview} alt="preview"/>
                    </li>
                )
            },
            fail: function (xhr, error, url) {
                console.error(error + "          " + xhr + "        " + url);
            }
        });
    });
    return (
        <div className= "twitchListWraper" >
            <ul className="twitchList">
                {finalList}
            </ul>
        </div>
    )
}
});
var App = React.createClass({
getInitialState: function () {
    return {
        activeOption: "all"
    };
},
changeActiveOption: function (option) {
    this.setState({
        activeOption: option
    });
},
render: function () {
    return (
        <div className="app-root">
            <Navbar changeActiveOption={this.changeActiveOption}/>
            <TwitchList activeOption={this.state.activeOption}/>
        </div>
    );
}
});

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

JSBin:http://jsbin.com/sulihogegi/edit?html,css,js,console,output

Answer 1

每次状态在 <App> 上发生变化时，它重新呈现。这包括重新渲染它的 child (其中有 <TwitchList> )。您的 ajax 调用是在 <TwitchList> 中进行的的 render函数，所以每次状态改变时，它都会触发该 ajax 代码。

如果您想知道为什么状态会发生变化，那是因为您有一个函数，changeActiveOption ，更新 <App>的状态被传递给 <Navbar>然后传递给 <StateSelector> .

这里要做的适当的事情是找到一个生命周期事件，在其中进行 ajax 调用。我推荐 componentWillMount和 componentWillUpdate .

看看lifecycle functions here .