Question

我的反应元素如下：

var superagent = require('superagent')

var app = React.createClass({
    getInitialState() {
        return {
            message: '',
            dataList: []
        }
    },

    search (event) {
        var component = this;
        superagent.request('someurl?search=' + event.target.value)
            .end(function(err, res){
                component.setState({ dataList: res });
            })
    },

    render() {
        return <input type="text" value={this.state.message} onChange={this.search} />
    }
})

在我输入搜索栏的那一刻开始变得迟钝，我在控制台中收到这条消息超过20K次。

警告：setState（...）：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState（）。这是一个无操作。

即使我单独使用这两个函数，只有当我点击一个按钮时才会发出ajax请求，并且文本本身会从另一个负责更新文本的函数更新，但它仍然会变得迟钝。有什么建议吗？

更新你问的真正的整个组件：

            var ami = new require('asterisk-manager')('0000','0.0.0.1','xxxx','xxxx', true); 
            var ipc = require('ipc');
            var request = require('request');
            ipc.on("update-status", function (name, status) {
                //console.log(name, status);
            });
            var Extension = React.createClass({
                getInitialState () {    
                    return {
                        statusText: '',
                        circleColor: '#00FF00'
                    }
                },
                setStatus (status) {
                    if(status == 1) {
                        this.setState({statusText: 'Busy', circleColor: 'red'});
                    } else if(status == 8) {
                        this.setState({statusText: 'Dialing', circleColor: '#0099FF'});
                    } else {
                        this.setState({statusText: 'Available', circleColor: '#00FF00'});
                    }
                },
                call () {
                    if(typeof this.props.extension == 'undefined') {
                        this.props.callback(this.props.client.phone);
                    } else {
                        this.props.callback(this.props.extension);
                    }
                    console.log('Calling: ' + this.props.extension.name);
                },
                render: function() {
                    var component = this;
                    setInterval(function(){
                        ami.action({
                          'action': 'ExtensionState',
                          'exten': component.props.extension.name,
                          'context': 'default'
                        }, function(err, res) {
                            if(component.props.extension.name == res.exten)
                            component.setStatus(res.status);
                        });
                    }, 2000)
                    if(typeof this.props.extension == 'undefined') {
                        return (
                            <li>
                                <div id="wrapperDiv">
                                    <img src="assets/images/anon_user.png" width="50" />
                                    <div id="circle" style={{background: this.state.circleColor}}></div>
                                </div>
                                <span>{this.props.client.name}</span><br />
                                <span>{this.props.client.phone}</span>
                                <a onClick={this.call}>Click To Call</a>
                            </li>
                        )
                    } else {
                        return (
                            <li>
                                <div id="wrapperDiv">
                                    <img src="assets/images/anon_user.png" width="50" />
                                    <div id="circle" style={{background: this.state.circleColor}}></div>
                                </div>
                                <span>{this.props.extension.name}({this.state.statusText})</span>
                                <a onClick={this.call}>Click To Call</a>
                            </li>
                        )
                    }
                }
            });

Answer 1

重要的是要记住，每次setState时都会调用render方法。在这种情况下，您已在render方法中实施了setInterval方法，并且您无法清除该间隔（clearInterval）。因此，每次渲染时，都会创建一个新的setInterval计时器，该计时器执行ami.action，它设置重新呈现的状态，这将设置另一个间隔。我的猜测是你的滞后来源。

如果您希望从输入字段中捕获值，我建议您使用componentWillUpdate或componentDidUpdate等生命周期方法，具体取决于您的使用情况。

如果您尝试及时捕获正在从服务器更改的数据，则应使用componentWillMount设置间隔，并使用现有的setStatus方法处理它。请务必在componentWillUnmount生命周期方法中清除间隔。

相关资源：https://facebook.github.io/react/docs/component-specs.html

ajax请求＆＃39; onChange＆＃39;或者＆＃39; onClick＆＃39;输入

1 个答案: