试图确定为什么调用setState()不会更改React组件

时间:2015-12-27 01:54:42

标签: javascript dom reactjs

我有一个父/子组件层次结构,父项是TestResultChooser,而子项是TestResult,如下所示:

  var TestResultChooser = React.createFactory(React.createClass({

            displayName: 'test-result-chooser',

            statics: {
                customMethod: function (foo) {
                    return foo === 'bar';
                }
            },


            getInitialState: function getInitialState() {
                return {overallTestResults: null};
            },

            changeOverallTestResult: function changeOverallTestResult(value) {
                this.setState({overallTestResults: value});
            },

            render: function render() {

                var self = this;

                var tests = this.props.items.map(function (testPath) {

                    return React.createElement(TestResult, {
                        key: testPath,
                        testName: testPath,
                        name: testPath,
                        testResult: null
                    });

                });

                return React.createElement('div', null, React.createElement('h1', null, 'Test Results:'),
                    React.createElement('div', {id: 'tests'}, tests, React.createElement('p', {id: 'total'}, ' ',
                        React.createElement('b', null, 'Test Results:', this.state.overallTestResults))))

            }
        }));

        var TestResult = React.createFactory(React.createClass({

            displayName: 'test-result',

            getInitialState: function getInitialState() {
                return {};
            },

            componentDidMount: function(){

                var self = this;
                var testPath = this.props.testName;

                console.log('component did mount'); // this is indeed logged!

                $.get(testPath).done(function (msg) {
                    var myWorker = new Worker('/js/workers/one.js');
                    myWorker.postMessage(msg);
                    myWorker.onmessage = function (msg) {

                        console.log('make new state:',msg);

                        self.setState(msg.data);
                    };
                }).fail(function (err) {
                    console.error(err);
                });
            },

            clickHandler: function clickHandler() {

                console.log('clicked!');  // this is indeed logged!

                this.setState({testName: 'foo-bar'});  //this should now change what is displayed...

            },

            render: function render() {

                var self = this;

                return React.createElement('p', {
                        className: this.state.active ? 'active' : '',
                        onClick: this.clickHandler,
                    },
                    this.props.testName, '  ', React.createElement('b', null, 'Pass/fail')
                );
            }

        }));


    ReactDOM.render(React.createElement(TestResultChooser, {items: stf}), document.getElementById('react-app'));

因此,当我单击每个子项时,单击已注册,但testName不会更改,那么为什么不调用setState会更改我的小应用程序中显示的值?

0 个答案:

没有答案