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

Question

我有一个简单的布局。

有一个<StateSelector>在<Navbar>单击该按钮将执行一个方法。

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

现在，这位家长还有一个 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> 上的状态发生变化，它重新渲染。这包括重新渲染其子级(其中 <TwitchList> )。您的 ajax 调用是在 <TwitchList> 中进行的的render函数，因此每次状态更改时，都会调用该 ajax 代码。

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

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

看看lifecycle functions here .