Question

我有一个父组件，该组件从数组中呈现出旋转木马中的列表（子组件）。当我尝试在事件上重新呈现列表时，只有道具在子组件中发生了变化，而不是不重新显示新列表在螺旋桨中的状态。

从下拉菜单中，选择要渲染的列表，单击此列表将更改子组件的属性。

export default class DetailsInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showText: false,
            bannerObj:{},
            selectedid : 0,
            selectedSeason:props.item.contentType==='WebSeries'?props.item.season[0].name:'',
            seasonObj:[{
                    "id": 1,
                    "name": "Session 1",
                    "parts": [
                      {
                        "id": 1,
                        "name": "abcc",
                        "discription": null,
                        "url": "http://www.demo.com"
                      },
                      {
                        "id": 2,
                        "name": "abcdd",
                        "discription": null,
                        "url": "http://www.demo.com"
                      },
                      {
                        "id": 3,
                        "name": "abcddd",
                        "discription": null,
                        "url": "http://www.demo.com"
                      }
                    ]
                  },
                {
                    "id": 2,
                    "name": "Session 2",
                    "parts": [
                      {
                        "id": 1,
                        "name": "se2ofe1",
                        "discription": null,
                        "url": "http://www.demo.com"
                      },
                      {
                        "id": 2,
                        "name": "se2ofe2",
                        "discription": null,
                        "url": "http://www.demo.com"
                      }
                    ]
                  }
            ]
        };
        this.handlechange = this.handlechange.bind(this);
    }

    handleOnDragStart = e => e.preventDefault()

    handlechange(event){
        const vid = this.state.seasonObj.find(o=>o.name===event.target.value).id;
        this.setState({
            selectedSeason : event.target.value,
            selectedid : vid-1
        })
    }


    render() {

        return (
            <Grid>


                <div className="maindiv">
                <div>
                        <Select onChange={this.handlechange} value={this.state.selectedSeason}>
                            {this.state.seasonObj.map(item => 
                                <MenuItem key={item.id} value={item.name} id={item.id}>{item.name}</MenuItem>
                            )}
                        </Select>
//this is were the selected id is passed to the props to child
                        {this.state.seasonObj[this.state.selectedid].id &&
                            <SliderItem item={this.state.seasonObj[this.state.selectedid].parts} />
                        }

                        </div>
                </div>
            </Grid>
        )
    }
}

// child class
export default class SliderItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: props.item
        }

    }

    render() {

        return (
            <React.Fragment>

                <AliceCarousel>
                    {this.state.list
                        .map((item) =>
                            <div key={item.id} >
                              <img alt={item.title} src={item.url}/>
                        </div>)}
                </AliceCarousel>
            </React.Fragment>
        )
    }
}

从下拉列表中选择时，我需要更新courosel列表。

Answer 1

如果要重新渲染AliceCarouse，则必须在其上使用道具

            <AliceCarousel>
                {this.props.item
                     .map((item) =>
                        <div key={item.id} >
                          <img alt={item.title} src={item.url}/>
                    </div>)}           
            </AliceCarousel>

为什么更改道具后子组件不会重新渲染？

1 个答案: