为什么子组件在 prop 更改后不重新渲染？

Question

我有一个父组件，它从数组中呈现一个 corousel（子组件）中的列表。当我尝试在事件上重新呈现列表时，只有子组件中的道具会发生变化，而不是不会在 corousel 中重新呈现新列表的状态。

从下拉菜单中，我选择要呈现的列表，onclick 会更改子组件的 props。

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>;