子 Reactjs 组件未重新渲染答案

【问题标题】：Child Reactjs component not re-rendering子 Reactjs 组件未重新渲染
【发布时间】：2016-10-12 01:45:58
【问题描述】：

我有 2 个组件。

Youtube - 处理搜索栏和搜索结果的容器
YoutubeSearchResults - 暗示...显示 ajax 调用完成后的搜索结果

第一次，当您搜索某些内容时，结果显示良好。但是，当您再次搜索（查询是否更改）时，YoutubeSearchResults 不会更新（/重新渲染），尽管它的渲染函数被调用和执行（我知道是因为各种 console.log 的显示输出）。我无法弄清楚为什么会发生这种情况，并且似乎没有搜索与我遇到的类似。

Youtube 组件：

...
render() {
    let body = null;
    if(this.state.data !== null) {
        body = <YoutubeSearchResults data={this.state.data} />
    }
    return (
        <div>
            <div className="youtube-header">
                <form name="youtube-search" action="" onSubmit={this.search.bind(this)} method="post" ref="youtubeSearch">
                    <input type="text" name="q" placeholder="Search" autoComplete="off" />
                </form>
            </div>
            <div className="youtube-body" ref="youtubeBody">{body}</div>
        </div>
    );
}
search(e) {
    let self = this;

    ... ajax request ... }, function(data) {
        self.setState({ data: data });
    });
}

YoutubeSearchResults组件：

export default class YoutubeSearchResults extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: null,
            currentPage: 0,
            currentVideoId: null
        };
    }
    componentWillReceiveProps() {
        this.setState({ currentVideoId: null });
    }
    render() {
        let self = this;
        ...
        return (
            <div>
                {(this.state.data||this.props.data).map(function(obj, key) {
                    return (
                        <div key={key}>
                            <img src={obj.thumbnails.medium} className="youtube-result-thumbnail" />
                            <h3 className="youtube-result-title">{obj.title}</h3>
                            <div className="youtube-result-duration">
                                <span>{obj.contentDetails.duration.toSeconds().parseDuration()}</span>
                            </div>
                        </div>
                    );
                })}
                ...
            </div>
        );
    }
    ...
}

【问题讨论】：

请在这里发布代码。这次我已经为您完成了，但请将其发布在这里。我还建议只向我们提供与您的问题相关的代码，因为筛选两个完整的文件非常耗时，而且会阻止许多人提供帮助。
@AndrewL。谢谢和抱歉。好久没发帖了
你为什么有this.state.data||this.props.data？听起来您的 render 函数被困在您的 state 中的数据上，这会阻止它使用您的 props 中的数据。

标签： reactjs

【解决方案1】：

您需要在子组件收到新属性时更新其状态：

componentWillReceiveProps(newProps) {
    this.setState({ currentVideoId: null, data: newProps.data });
}

此更新还将触发重新渲染。

【讨论】：

还是同样的问题。它更新了道具/状态数据，但它只是不渲染任何东西。

【解决方案2】：

在 React 中，如果您只需要显示一些内容而不进行修改，请避免将其存储在 state 中。这会增加不必要的复杂性和渲染开销。

我已经删除了data 的多余状态对象，并删除了模棱两可的(this.state.data||this.props.data) 映射调用。下面的代码对你有用吗？

Youtube搜索结果：

export default class YoutubeSearchResults extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentPage: 0,
            currentVideoId: null
        };
    }
    componentWillReceiveProps() {
        this.setState({ currentVideoId: null });
    }

    render() {
        const data = this.props.data;
        // ...
        return (
            <div>
                { data.map((obj, key) => {
                    return (
                        <div key={key}>
                            <img src={obj.thumbnails.medium} className="youtube-result-thumbnail" />
                            <h3 className="youtube-result-title">{obj.title}</h3>
                            <div className="youtube-result-duration">
                                <span>{obj.contentDetails.duration.toSeconds().parseDuration()}</span>
                            </div>
                        </div>
                    );
                })}

            </div>
        );
    }
    // ...
}

【讨论】：

【解决方案3】：

好的，我想通了。当我执行搜索时，我正在清空搜索结果容器。

search(e) {
    let self = this;

    ... ajax request ... }, function(data) {
        $(self.refs.youtubeBody).empty(); // <-- This was the issue
        self.setState({ data: data });
    });
}

不知道为什么我以前没有想到这一点，但是是的，我假设它实际上是在删除 YoutubeSearchResults 组件，所以在更新道具时它没有设置或其他东西。我也错误地将它排除在我的问题之外，因为我当时认为这不是问题。

因此，对于遇到类似问题的任何人，请确保您没有删除该组件。

【讨论】：