前端 - 父组件的state明明更新了 为什么子组件上没有反应

问题描述

问 题

class UserGist extends React.Component{
            constructor(props){
                super(props);
                this.state={
                    bookname:"",
                    image:"",
                    mobilie_link:"",
                }
                //this.componentDidMount=this.componentDidMount.bind(this)
            }
            componentDidMount(){
                $.ajax(
                {
                    type:"get",
                    url:this.props.source,
                    dataType:"jsonp",
                    success:function(result){
                        var book=result;
                        this.setState({
                        bookname:book.title,
                        image:book.image,
                        mobile_link:book.alt,
                        source:""
                            })
                    }.bind(this)
                })
            }
            /*componentWillUnmount() {//When fetching data asynchronously, use componentWillUnmount to cancel any outstanding requests before the component is unmounted.
                this.serverRequest.abort();
              }*/
            render(){
                let aStyle={
                background: "#cc2299",
                fontFamily:"微软雅黑",
                color:"white",
                margin:20+"px",
                display:"inline-block",
                padding:"10px 20px"}
                return(
                    <div style={{width:500+"px",margin:"0 auto"}}>
                        <span style={aStyle}>书名：{this.state.bookname}</span>
                        <img src={this.state.image} title="hello" />
                        <a style={aStyle} href={this.state.mobile_link}>查看详情</a>
                    </div>
                )
            }
        }
        var RollPage=React.createClass({
            getInitialState:function(){
                return {
                    source:"https://api.douban.com/v2/book/1220562"    
                    }    
            },
            clickDown:function(){
                let s=/*parseInt(*/this.state.source/*.match(/\/[/d]*$/).join(''));*/;
                //alert(s)
                this.setState({
                    source:"s"
                })
            },
            buttonStyle:{
                color:"#fff",
                fontSize:20+"px",
                padding:"10px 20px",
                backgroundColor:"#000",
                cursor:"pointer",
                border:'none',
            },
            render:function(){
                return(
                <div>
                    <UserGist source={this.state.source} />    
                    <button onClick={this.clickDown} style={this.buttonStyle} >下一本</button>
                </div>
                )
            }
        })
        ReactDOM.render(
            <RollPage />,
            document.getElementById("root")
        )

解决方案

为什么"父组件的state明明更新了 为什么子组件上没有反应"

因为父组件触发clickDown时，你的父组件中的this.state.source一直是"s"字符串，自然就没更新，也不会作重渲染，自然就不会更新。

clickDown:function(){
    let s=/*parseInt(*/this.state.source/*.match(/\/[/d]*$/).join(''));*/;
    //alert(s)
    this.setState({
        source:"s"
    })
},

实际上，你的整个应用的思路都是…不正确。

我猜想你是要作点按"下一本"，然后在子组件里呈现下一本书的资料。

比较好的思路是，在父组件用AJAX抓好资料，然后用props传给子组件就可以了，子组件只需显示资料，不需要有自己的state。差不多是下面的语法:

clickDown: function(){
    let s = 'https://api.douban.com/v2/book/1220562'
    $.ajax(
    {
        type: "get",
        url: s,
        dataType: "jsonp",
        success: function(result){
            var book=result;
            this.setState({
              data:{
                bookname:book.title,
                image:book.image,
                mobile_link:book.alt,
                source:""
              }
            })
        }.bind(this)
    })
},

父组件用props把this.state.data传给子组件，子组件可以取到抓到的资料，然后呈现，像这样:

<div style={{width:500+"px",margin:"0 auto"}}>
    <span style={aStyle}>书名：{this.props.data.bookname}</span>
    <img src={this.props.data.image} title="hello" />
    <a style={aStyle} href={this.props.data.mobile_link}>查看详情</a>
</div>

另外，会在componentDidMount生命周期方法中用上Ajax，通常是为了初始化组件中的资料用的，除非组件卸载，不然这方法在组件更新资料期间，不会再被调用。

最后，你这代码混用了ES6类与ES5的工厂样式写法，要不要统一一种会比较容易维护。

这篇关于前端 - 父组件的state明明更新了 为什么子组件上没有反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！