状态改变后，组件不会重新渲染

Question

我正在尝试从youtube上获取视频并在浏览器上显示..我可以获取视频并更新状态属性。 （使用控制台日志检查）

但是当我更新state属性时，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>
        )
    }
}

SearchResults组件

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

您需要在getDerivedStateFromProps()组件中使用SearchResults，以便在父组件发生更改时期望获得新的道具值。安装组件后会调用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

Answer 2

您不太可能检查组件的state属性。你很有可能检查了更新的this.state。问题是什么是this。

没有证据表明您按照开发指南中的建议将事件处理程序绑定到组件。因此关键字this不反映Component，它反映了接收事件的DOM元素。

要对此进行测试，控制台会在事件处理程序中记录this的值。

修理：

this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.handleSidebarVideoClick = this.handleSidebarVideoClick.bind(this);

在他们各自的班级建设者。

参考：https://reactjs.org/docs/handling-events.html