javascript - 状态更改后组件不会重新渲染

Question

我正在尝试从 youtube 获取视频并在浏览器上显示。我能够获取视频并更新状态属性。 (通过控制台日志检查)

但是当我更新状态属性时，SearchResults 组件不会重新呈现。这是我的组件

class Application extends React.Component {

    state = {videos: []};

    handleFormSubmit = async term => {
        const res = await youtubeApi.get("search", {
            params: {q: term}
        });

        this.setState({videos: res.data.items})
    };

    render() {
        return (
            <div className="container">
                <SearchForm onFormSubmit={this.handleFormSubmit}/>
                <SearchResults videos={this.state.videos}/>
            </div>
        )
    }
}

搜索结果组件

class SearchResults extends React.Component {

    state = {featured: null, suggested: []};

    componentDidMount() {
        if (this.props.videos.length > 0)
            this.setState({featured: this.props.videos[0].id.videoId});

        if (this.props.videos.length > 1)
            this.setState({suggested: this.props.videos.slice(1)});
    }

    handleSidebarVideoClick = id => {
        this.setState({featured: id})
    };

    render() {
        return (
            <div className="row">
                <div className="col-md-8">
                    <Video video={this.state.featured}/>
                </div>
                <div className="col-md-4">
                    <Sidebar videos={this.state.suggested} onSidebarVideoClick={this.handleSidebarVideoClick}/>
                </div>
            </div>
        )
    }
}

Answer 1

您需要在 SearchResults 组件中具有 getDerivedStateFromProps() ，以便在父组件上发生更改时期望新的 props 值。ComponentDidMount 在组件安装后调用，而不是在每次更改时接收 prop 值时调用。

所以你应该有这样的东西:

static getDerivedStateFromProps(nextProps) {
    if (nextProps.videos.length > 0) {
      return {
        featured: nextProps.videos[0].id.videoId
      };
    }
    if (nextProps.videos.length > 1) {
      return {
        suggested: nextProps.videos.slice(1)
      };
    }
    return null;
  }

引用号:https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops