如何显示我现在在结果中的数据？

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 至少是一个空数组，并且您不会出现地图错误。