0

在这个反应代码中，我试图将数据设置为当前状态，将数据设置为状态后，我需要在固定数据表中使用它。为了实现它，我写如下。主要问题是“ componentDidMount中的this.setState没有被执行/到达我需要在那里调用数据表函数的地方。这是我的代码：

     export default class Main extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                result: [],
                loading: false,
                filteredRows: null,
                filterBy: null,
            };
        }
        getZipData() {
            //Here i got the data from server 
        }
        componentDidMount() {
            this.getZipData().then((data)=>{
                console.log("data:"+data.length);
                this.setState({result:data,loading:true});  //state successfully set here.
                console.log("result:*******************"+this.state.result.length); //this console is not printed
this._filterRowsBy(this.state.filterBy)
            });

        };
        _rowGetter(rowIndex){
            alert("row Getter");
            return this.state.filteredRows[rowIndex];
        }
        _filterRowsBy(filterBy){
            var rows = this.state.result.slice();
            var filteredRows = filterBy ? rows.filter((row)=>{
                return row.RecNo.toLowerCase().indexOf(filterBy.toLowerCase()) >= 0
            }) : rows;
            this.setState({
                filterRows,
                filterBy,
            })
        }
        _onFilterChange(e){
            this._filterRowsBy(e.target.value);
        }
        render() {
            if(this.state.loading==false) {
                return (
                    <div className="row-fluid">
                        <img className="col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3"
                             src="http://www.preciseleads.com/images/loading_animation.gif"/>
                    </div>
                )
            }
            else{
                console.log("result:////////////////////"+this.state.result.length); //this console is printed
                console.log("loading completed");
                return(
                    <div>
                       <!-- fixed data table code goes here -->
                    </div>
                )
            }

        }
    }

状态已成功更新，但在未达到该语句之后， IN componentDidMount，非常感谢任何帮助。

4

2 回答 2

1

在你的 Promise 中添加一个 catch 处理程序。我想你得到一个错误。

于 2015-09-08T07:18:08.613 回答
0

嗨，也许这是你的问题，

Facebook：

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。在调用此方法后访问 this.state 可能会返回现有值。无法保证对 setState 的调用同步操作，并且可能会批处理调用以提高性能。除非在 shouldComponentUpdate() 中实现了条件渲染逻辑，否则 setState() 将始终触发重新渲染。如果正在使用可变对象并且无法在 shouldComponentUpdate() 中实现逻辑，则仅在新状态与先前状态不同时调用 setState() 将避免不必要的重新渲染。

  this.setState({result:data,loading:true}, () => {
    // Your logic
  });

第二个参数是设置状态后调用的回调函数。

希望这可以帮助：）

编辑：我没有看到不变的错误，（从评论中，你能提供完整的错误）

于 2015-09-08T21:21:04.963 回答