Question

当状态为null时，React组件显示数据，但是当它获取数据时，它不会更新视图的内容。

constructor(props){
    super(props);

    this.state = {
        post: null
    }

    this.getTotalDownloadSize = this.getTotalDownloadSize.bind(this); 

}

componentWillMount(){
    const {match} = this.props;
    const postId = _.get(match, 'params.id');
    getDownloadInfo(postId).then((response) => {
        this.setState({
            post: _.get(response, 'data')
        });
    }).catch((err) => {
        console.log("an error while fetching data", err);
    })
}

在我的渲染中我得到渲染（）{

的空值

render(){
    const {post} = this.state;
    console.log{post};
    const files = _.get(post, 'files', []);
)

最初它显示空值但是在它有值之后却没有更新视图的内容。谁能帮我这个。提前谢谢。

Answer 1

如果您的数据来自异步请求，则应使用componentDidMount

立即仅在客户端（不在服务器上）调用一次   初始渲染发生后。在生命周期的这个阶段，   你可以访问你孩子的任何参考（例如，访问   底层DOM表示）。 componentDidMount（）方法   子组件在父组件之前调用。

如果要与其他JavaScript框架集成，请设置计时器   使用setTimeout或setInterval，或发送AJAX请求，执行这些   这种方法的操作。

Answer 2

componentDidMount是您可以放置请求逻辑的地方。

componentDidMount() {
     const {match} = this.props;
        const postId = _.get(match, 'params.id');
        getDownloadInfo(postId).then((response) => {
            this.setState((state) => ({ post: _.get(response, 'data')}));
        }).catch((err) => {
            console.log("an error while fetching data", err);
        })
    }

React组件正在呈现，但在状态更新时不会更新

2 个答案: