javascript - 如何在结果中显示我现在拥有的数据？

Question

import React, { Component } from 'react';
import './Video.css';

class Video extends Component{
    constructor(props){
        super(props);
        this.sortIT = this.sortIT.bind(this);
        this.state = { isHide : false};
        this.state = { isResult:[]};
        this.state = { isShow : true}
    }
    sortIT(){
        const finalItVideos = [] 
        this.setState({isHide:true});
        videoList.map((video,i)=>{
            const videosOfIT = video;
            const keyOfVideo = video.key;
            if(keyOfVideo === "IT"){    
                finalItVideos.push(videosOfIT);
            }
        })
        this.setState({isShow : false});
        this.setState({isResult:finalItVideos})
    }


    render(){
        const  hideClass = this.state.isHide ? "hide" : "show";
        const result = this.state.isResult;
        const showClass = this.state.isShow ? "hide" : "show";

        return(

            <div>
            {result}
            <div id="videoContainer" className="container-fluid">
            <div className="row">
            <div className="col-xs-12 col-sm-3">
            |<br /><b>  Our Videos</b><br />
            <b>You Looking for ?</b>
            <p onClick={this.sortIT}>IT Industry</p>
            <p>Lean Canvas</p>
            <p>Wedding Invitations</p>
            <p>Video Resumes</p>
            <p>App Explainers</p>
            <p>Video Presentations</p>
            <p>Video Campaigns</p>          </div><br />
            <div className={showClass}>
            {this.finalItVideos}
            </div>

            {videoList.map((video, i)=>(
                <div key={i} className={hideClass}>
                {video.images.map((image,index)=>(
                    <VideoItem imageUrl={image} key={index} />
                    ))}
                </div>  
                ))}
            </div>
            <br />
            <button className="btn">
            <i className="fa fa-play fa-rotate-180" aria-hidden="true"></i> 
            &nbsp;Load More
            </button>

            </div>
            </div>
            );
    }


}

export default Video;
class VideoItem extends React.Component {
    render() {
        return (
            <div>
            {this.props.imageUrl}
            </div>
            )
    }
}


const videoList = [video Array]
}
]

如何显示数组中的数据，数据如下所示

{
    key: "Birthday",
    images: [<div name="IT"  className="col-xs-12 col-sm-3">
    <div className="content">
    <div className="content-overlay"></div>
    <img className="content-image" src={require('./139923200.PNG')} />
    <div className="content-details fadeIn-top">
    <h3>This is a title</h3>
    <a data-fancybox href="https://vimeo.com/139923200?autoplay=1&HD=1"><h4><i className="fa fa-play" aria-hidden="true"></i>
    &nbsp;Click To Play</h4></a></div></div>
    </div>]
}

我的结果数组中有三个，如果我使用 map ，它会说“ map 未定义”，如果我直接将其放入，这就是错误

未捕获错误:对象作为 React 子对象无效(发现:带有键 {key, images} 的对象)。如果您打算渲染子集合，请改用数组。

如何解决这个问题？

Answer 1

您正在构造函数中重写状态 3 次。你应该这样做:

constructor(props){
        super(props);
        this.sortIT = this.sortIT.bind(this);
        this.state = { isHide : false, isResult:[], isShow : true};
}

现在您可以执行 isResult.map()，因为 isResult 至少是一个空数组，并且不会出现 map 错误。