Question

当我尝试从服务获取设置状态时，我收到上述警告。

   <div className="well">
                <ContactFilter onFilter={this.filterByType} />
            </div>

我的过滤器在setState回调中设置filteredByType状态：

filterByType: function(type) {
    this.setState({
        pageNumber: 1,
        filteredByType: type
    }, this.loadSchools);
},

我的loadSchools方法：

function() {
    var callback = function(data) {
        this.setState({schools: data.schools,
            totalStudents: data.totals.total,
            numberOfPages: Math.ceil(data.totals.total / this.state.pageSize)})
    }.bind(this);

    var query = {
        pageNumber: this.state.pageNumber,
        pageSize: this.state.pageSize,
        sortKey: this.state.sortKey,
        filteredByType: this.state.filteredByType,
        sortIsAscending: this.state.sortIsAscending
    };

    SchoolsDataService.getSchoolsLookup(query, callback);
},

学校状态然后呈现griddle网格，其中SchoolContactLink组件呈现其中一列。

警告告诉我要看这个组件 - 但我看不出它有什么问题：

var SchoolContactLink = React.createClass({
getInitialState: function() {
    return {
        contacts: [],
        showModal: false
    }
},

OnLoadedPageBasicData: function(data){
    ApplicationActions.setLoadedState(data);
},

componentDidMount: function() {
    logger.info("componentDidMount","editstudent");
    ApplicationActions.getPageData(this.OnLoadedPageBasicData,"editstudent");
    this.loadContacts();
},

close: function(){
    this.setState({ showModal: false }, this.props.metadata.customFunc());
},

open: function(){
    this.setState({ showModal: true });
},

loadContacts: function() {
    let query = {
        id: this.props.rowData.id
    };
    var callback = function(data) {
        this.setState({contacts: data})
    }.bind(this);

    if(query.id){
        SchoolsContactsService.getContacts(query, callback);
    };
},

onTableUpdate:  function(data) {

    let resultData = data.row;
    resultData.isDeleted = false;

    if(data.type == "delete") {
        resultData.isDeleted = true;
    }

    resultData.schoolId = this.state.contacts[0].schoolId;

    var callback = function(){
        this.loadContacts();
    }.bind(this);

    SchoolsContactsService.saveContacts(resultData, callback)

},

render: function() {
    var fireModal = '',
    defaultCssClasses = "sortable-header verticalHeader",
        tableOptions = {
            tableClass: "table-edit-student",
            tableActionButtonSet: ['add'],
            buttonColumnClass: " col-md-3",
            rowActionButtonSet: ['edit','delete'],
            rowEditModeActionButtonSet: ['update','cancel'],
            tableRowScheme: [
                {"column":"contactName", "title":"Student name", "type": "string", "className": "col-md-3"},
                {"column":"contactTypeId", "title":"Type", "type": "select", "select_type_id": 37, "className": "col-md-3"},
                {"column":"isDefault", "title":"Default", "type": "checkbox", "className": "col-md-3"}
            ],
            onTableUpdate: this.onTableUpdate
        };

    if(!this.props.data){
        return (<span>
                    {this.props.data}
                </span>
        )
    }

    return (<div>
            <a onClick={this.open} className="linkClass">
                {this.props.data}
            </a>
            <Modal show={this.state.showModal} onHide={this.close}>
                <Header >
                    {this.props.rowData.name}
                </Header>
                <Body>
                    <SchoolsContactsTable {...tableOptions} tableData={this.state.contacts} />
                </Body>
                <Footer>
                    <Button onClick={this.close}>Close</Button>
                </Footer>
            </Modal>
        </div>)
}
});

module.exports = SchoolContactLink;

警告我指向callback中的setState SchoolContactLink：

loadContacts: function loadContacts() {
    var query = {
        id: this.props.rowData.id
    };
    var callback = function (data) {
        this.setState({ contacts: data }); // warning points to here
    }.bind(this);

    if (query.id != 0) {
        SchoolsContactsService.getContacts(query, callback);
    };
},

反应警告：setState（...）：只能更新已安装或安装的组件

0 个答案: