Question

我现在真的很困惑，当加载一个反应jsx引用的MVC视图时，首先调用哪个函数。

我的意思是我创建了一个MVC项目，它从另一个项目加载点击事件的视图。我的另一个视图加载信息并在jsx中呈现。但这并没有发生。以下是我的反应代码：

react.jsx

var App = React.createClass({
    getInitialState: function() {
        var state = {
            counter: 0,
            initialInfo: []
        };
        return state;
    },

    componentWillMount: function() {
        $.ajax({
            type: 'POST',
            url: window.location.protocol + "//" + window.location.host + '/' + 'api' + '/' + 'Application' + '/' + 'GetUserInfo',
            data: JSON.stringify({
                'userId': '15115',
                'IsUserOffShore': 'N'
            }),
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            cache: false,
            success: function(data) {
                JSON.parse(data)
                this.setState({
                    initialInfo: JSON.parse(data)
                });
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },

    render: function() {
        return ( 
            <div>
                <AssignValue valueMapper = {
                    this.state.initialInfo.Assignment
                } /> 
            </div>
        );
    }
});

function AssignValue(props) {
    if (props.valueMapper != undefined) {
        props.map((type) => {
            if (type.Type == 1) {
                return <UserGreeting valuemapper2 = {
                    type
                }
                />
            }
        })
    }
}

function UserGreeting(props) {
    return ( 
        <h1> Hello World </h1>
    );
}

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

我的上面反应jsx文件在我的index.chtml视图中引用，该视图从另一个页面点击加载。但是，我无法理解反应的生命周期。我已经浏览了这个链接：http://busypeoples.github.io/post/react-component-lifecycle/

但我的反应并不正常。它始终首先调用渲染函数，然后调用 componentWillMount 函数。由于我的代码失败，有时我得到错误必须返回有效的React元素（或null）。您可能已经返回了undefined，数组或其他一些无效对象。 和 尝试更新已卸载（或无法装入）的组件AssignValue。

this.state.initialInfo.Assignment 值是一种数组类型。有时它显示未定义，有时它有值导致问题。我做错了什么。

请原谅我，因为我是新手。

Answer 1

这个功能实际上并没有返回任何东西（好吧，技术上它正在返回undefined），这就是造成你错误的原因：

function AssignValue(props) {
    if (props.valueMapper != undefined) {
        props.map((type) => {
            if (type.Type == 1) {
                return <UserGreeting valuemapper2 = {
                    type
                }
                />
            }
        })
    }
}

如果您稍微对代码进行结构化以了解发生了什么，可能会有所帮助：

function _mapper(type) {
  if (type.Type == 1) {
    return <UserGreeting valueMapper2={type} />;
  }
  // return undefined; is implied here
}

function AssignValue(props) {
    if (props.valueMapper != undefined) {
        props.map(_mapper); // Not actually returning the results of .map()
    }
    // return undefined; is implied here as well
}

说实话，要说出你打算在这里做什么有点难。但是你没有从你的函数返回任何东西的事实肯定会导致错误信息。

反应的生命周期

1 个答案: