我真的需要将 forceUpdate 与 fetch API 和 ReactJS 一起使用吗

Question

我正在使用 React 和 fetch() 开发 UI，我最终这样做了：

getOperatorsList: function ( obj ) {
    fetch( 'http://x.x.x.x/operators.list',
        {
            method: 'GET',
            credentials: 'include'
        }
    ).then( function ( response ) {
            return response.json()
        } ).then( function ( json ) {
        if ( json.statusCode === 3 ) {
            cookieService.unsetCookie( 'sessId' );
        }
        obj.setState( { data: json }, () => obj.forceUpdate() );
    } ).catch( function ( ex ) {
        console.log( 'parsing failed', ex );
    } )

}

这在我的组件 Operators 中调用，看起来像这样

var Operators = React.createClass( {

    getInitialState: function () {
        return {
            data: [{ "data": "Loading" }]
        }
    },

    componentDidMount: function () {
        operatorsService.getOperatorsList( this );
    },

    render: function () {
        return (
            <div>
                <Row >
                    <Col>
                        <DataTablesCustom data={this.state.data} />
                    </Col>
                </Row>
            </div>
         );
     }
});

我已经看过this question，但代码对我不起作用。

这很好用，但我真的需要使用forceUpdate() 还是有办法让代码“更干净”？

编辑：在子组件中有一个setState，看起来像这样this.setState({stuff: stuff}, this.function()});。将setState 更改为this.setState({stuff: stuff}, () => this.function()}); 后，我能够删除forceUpdate()。

Answer 1

要让您的代码正常工作，您可以尝试在服务中执行此操作：

obj.setState.bind(obj)( { data: json });

但是，无需将组件对象传递给您的服务。可以说，这不是一个好主意，因为您只是在不需要时耦合事物。让组件调用您的服务，然后决定如何处理数据：

 getOperatorsList: function () {
    return fetch( 'http://x.x.x.x/operators.list', {
        method: 'GET',
        credentials: 'include'
    }).then( function ( response ) {
        return response.json()
    }).then( function ( json ) {
        if (json.statusCode === 3 ) {
            cookieService.unsetCookie( 'sessId' );
        }
        return json;
    }).catch( function ( ex ) {
      console.log( 'parsing failed', ex );
    })

}

然后在你的组件中：

componentDidMount: function () {
    operatorsService.getOperatorsList()
    .then(function (json) {
       this.setState({ data: json });
    }.bind(this))
}