模态没有在反应中显示正确的视频

Question

嗨，我正在用 React 实现一个示例应用程序，我也在使用 youtube api 搜索和 React bootstrap。

思路如下，我输入一个搜索词，比如"PS4"这会调用youtubeapi搜索，会带回5个匹配结果为 json 格式。有了这个 json，我呈现了一个缩略图列表，其中包含视频、标题、描述（类似于 youtube 网站）。如果我单击其中一个缩略图，我的想法是显示一个带有视频的模态对话框。问题来了，它总是加载相同的视频。

我省略了文件开头的导入

VideoList.js

   class VideoList extends React.Component {
    constructor(props) {
        super(props);
        this.openModal = this.openModal.bind(this);
        this.close = this.close.bind(this);
        this.state = {
            showModal: false
        }
    }

    openModal(video) {
        this.setState({ showModal: true });
    }
    close() {
        this.setState({ showModal: false });
    }

    render() {
        const videoItems = this.props.videos.map(video =>
            <Col xs={6} md={4}>
                <Thumbnail onClick={() => this.openModal(video)}
                    className="thumbnail"
                    src={video.snippet.thumbnails.default.url}
                    alt={video.snippet.description}
                    key={uid()}
                >
                    <h3>{video.title}</h3>
                    <p>{video.snippet.description}</p>
                    <hr />
                    <i>Date: {video.snippet.publishedAt}</i>
                    <VideoView show={this.state.showModal} video={video} close={this.close} />
                </Thumbnail>
            </Col>
        );
        return (
            <Grid>
                <Row>
                    {videoItems}
                </Row>
            </Grid>
        );
    }
}

export default VideoList;

VideoView.js

   const VideoView = props => {
    if (!props) {
        return <div>{'Could not load the video'}</div>
    }
    return (
        <div className="static-modal">
            <Modal show={props.show}>
                <Modal.Header>
                    <Modal.Title>{props.video.snippet.title}</Modal.Title>
                </Modal.Header>

                <Modal.Body>
                    One fine body...
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={() => props.close()}>Close</Button>
                </Modal.Footer>
            </Modal>
        </div>
    );
}

export default VideoView;

如果我点击其中一个缩略图，一个模态弹出窗口会显示视频（它的一些信息，而不是视频本身），问题是它总是显示最后一个视频（最后在缩略图列表中)

另一件事： 我在这里面临设计问题，因为我认为我应该将 onclose 操作委托给模式对话框，在这种情况下，VideoView 但是 videoView 组件是无状态组件，我只发送一些道具来渲染它，（检查 onclose 回调） .这是正确的方法吗？谢谢！

Answer 1

您创建了多个 VideoView 元素共享同一个道具 this.state.showModal。这意味着当 this.state.showModal 是 true 时，您会立即显示所有模态，并且您只会看到其中一个在最上面。创建一个 VideoView 元素并将其传递给要显示的视频。对于 show/hide 模态，您还可以检查 this.state.video 是否不等于 null - 如果它已分配值，则模态应该可见。

class VideoList extends React.Component {
    constructor(props) {
        super(props);
        this.openModal = this.openModal.bind(this);
        this.close = this.close.bind(this);
        this.state = {
            video: null
        }
    }

    openModal(video) {
        this.setState({ video: video });
    }
    close() {
        this.setState({ video: null });
    }

    render() {
        const videoItems = this.props.videos.map(video =>
            <Col xs={6} md={4}>
                <Thumbnail onClick={() => this.openModal(video)}
                    className="thumbnail"
                    src={video.snippet.thumbnails.default.url}
                    alt={video.snippet.description}
                    key={uid()}
                >
                    <h3>{video.title}</h3>
                    <p>{video.snippet.description}</p>
                    <hr />
                    <i>Date: {video.snippet.publishedAt}</i>
                </Thumbnail>
            </Col>
        );
        return (
            <div>
                <Grid>
                    <Row>
                        {videoItems}
                    </Row>
                </Grid>
                <VideoView show={this.state.video !== null} video={this.state.video} close={this.close} />
            </div>
        );
    }
}

export default VideoList;

模态没有在反应中显示正确的视频

Modal not showing proper video in react

javascript

reactjs

react-bootstrap

axios