ReactJS - 在刷新时,componentDidMount中不会立即提供道具

时间:2016-08-20 23:08:14

标签: javascript ajax reactjs redux

遇到令人沮丧的问题,希望有人可以提供帮助。在https://github.com/georgecook92/Stir/blob/master/src/components/posts/viewPosts.jsx获得完整的回购。

直接进入代码 -

nil

如果通过ui从另一个组件加载组件,它将按预期运行。但是,如果刷新页面,则userDid等不会立即提供给componentDidMount。

我已经检查过,以后可以使用,但我发现如果我移动我的AJAX调用来获取渲染方法或其他生命周期方法(如componentWillReceiveProps)的帖子 - 道具会不断更新并锁定UI - 不理想。

如果我将ajax调用移动到render方法,我也不确定为什么每秒会进行多次ajax调用。

希望你能帮忙!谢谢。

编辑。

componentDidMount() {
    const {user_id,token} = this.props.auth;
    this.props.startLoading();
    console.log('props auth', this.props.auth);
    if (user_id) {
      console.log('user_id didMount', user_id);
      this.props.getUserPosts(user_id, token);
    }

  }

1 个答案:

答案 0 :(得分:1)

我建议使用componentWillReceiveProps并将你的道具保存为状态,以便在发生更改时触发重新渲染(例如道具从未定义更改为具有值)。这样的事情会起作用:

import React, {Component} from 'react';

// using lodash for checking equality of objects
import _isEqual from 'lodash/isEqual';

class MyComponent extends Component {
    constructor(props={}) {
        super();
        this.state = props;
    }

    // when the component receives new props, like from an ajax request,
    // check to see if its different from what we have. If it is then 
    // set state and re-render
    componentWillReceiveProps(nextProps) {
        if(!_isEqual(nextProps, this.state)){
            this.setState(nextProps);
        }
    }
    render() {
        return (
            <div>{this.state.ItemPassedAsProp}</div>
        );
    }
}