数据变了,子组件数据不更新,还是第一次渲染时传的数据_企业IT_编程问答

数据变了,子组件数据不更新,还是第一次渲染时传的数据

来源:互联网  时间:2018/1/26 2:19:18

关于网友提出的“ 数据变了,子组件数据不更新,还是第一次渲染时传的数据”问题疑问,本网通过在网上对“ 数据变了,子组件数据不更新,还是第一次渲染时传的数据”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题: 数据变了,子组件数据不更新,还是第一次渲染时传的数据
描述:

ExerciseDetail是提示框点开后的详情页。
我用react-keeper做路由,跳转时传路由地址和数据就可以了:Control.go(/exercise/1, state);
点提示框跳转/exercise/1之后,页面渲染ok,这个时候再来一个提示框,从1跳转/exercise/2
我发现urllimit在组件直接用可以更新渲染,但是给子组件就不传更新后的数据

import React from "react";
import { createSelector } from 'reselect';
import { connect } from 'react-redux';
import { actions } from '../Root/redux'
import { Control, Link } from 'react-keeper'

class ExerciseDetail extends React.Component {
    constructor(props) {
        super(props);
        this.exercise = Control.state.exercise;
        this.state = {
        }
    }

    componentWillReceiveProps(nextProps) {
        if (!Control.state) {
            return;
        }
        this.setState({
            options: this.exercise.options,
            problemid: this.exercise.problemid,
        })
        this.exercise = Control.state.exercise;
        console.log(Control.state);//可以收到每次发的数据
    }

    render() {
        const exercise = this.exercise;
        const url = exercise.url;   
        const limit = exercise.limit;//输出这里数据是最新的,但是不给Options传更新的数据
        return <div>
            <div>{url}</div> 
            <div>{limit}</div> 
            //都可以及时更新渲染

            <Options  limit={limit} url={url}/>
            
        </div>
    }
}

//子组件
function Options(props) {
    const limit = props.limit;
    //子组件里输出一直是第一次渲染传的数据,第二次就没触发传值
    const url = props.url;
}

return <div>

解决方案1:

先把componentWillReceiveProps的生命周期搞清楚。
componentWillReceiveProps方法中,要通过nextProps来改变state.你setState的那个值,与nextProps毛关系都没有,当然子组件不更新了。
另外,props也可以render,所以不需要componentWillReceiveProps,直接在render中,根据props实现就好了。

上一篇请问angular练手的实战项目,有木有。。。?
下一篇为什么ios微信内置浏览器长按图片出现ios默认浏览器样式?
明星图片
相关文章
《 数据变了,子组件数据不更新,还是第一次渲染时传的数据》由码蚁之家搜集整理于网络,
联系邮箱:mxgf168#qq.com(#改为@)