儿童不会更新父母的状态变更后

Question

在PlayerContainer的第一次渲染之后，我的父部件中的MovieID发生了另一种变化，并不会引起PlayerContainer的果实，我不明白为什么。

父组件：

export default class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      renderPlayer: false,
      movieId: ''
    }
  }

  handleCallback = (num) => {
    this.setState({ movieId: num, renderPlayer: true }, () => {
      console.log('MovieID ' + this.state.movieId)
    })
  }

  render() {
    const { movieId } = this.state;
    return (
      <div className="App">
        {this.state.renderPlayer
          ? <PlayerContainer movieId={movieId} />
          : null}
        <Selection handleClick={this.handleCallback} />
      </div>
    )
  }
}

选择组件接收单击，并导致父状态变化，然后将其传递给PlayerContainer：

export default class PlayerContainer extends Component {

    constructor(props) {
        super(props)
        this.state = {
            movies: [],
            DataisLoaded: false
        }
    }

    componentDidMount() {
        fetch("https://a.url.com/movies/" + this.props.movieId + "/1/")
            .then((res) => res.json())
            .then((json) => {
                this.setState({
                    movies: json,
                    DataisLoaded: true
                });
            })
    }

render() {
        const { DataisLoaded, movies } = this.state;
        return (
            <div className='wum__playercontainer section__padding' id='player'>
                {!DataisLoaded
                    ? <h1>Please wait a second...</h1>
                    : <ReactPlayer
                        url={movies.link}
                        ...
                        ...
                    />}
            </div>
        )
    }
}

Answer 1

这是因为您仅在componentDidmount中使用this.props.movi​​eid。如果您想再次渲染这样的组件，则必须实现componentDidupdate函数，以便每次渲染道具都会更改：

componentDidUpdate() {
// fetching again with new props
}

您甚至可以使用PrevProps param指定DIDUPDATE函数：

componentDidUpdate(prevProps) {
   if(prevProps.movieId !== this.props.movieId) {
      //fetch again your data
   }
}