Question

const dataDisplay = this.state.allData.filter((item)=>{
        if(item.type==="Startup"){
            return(
                <div className="BlockForInvestor">
                    <div className="ImageDiv"><img src={item.link}></img></div>
                    <div className="ContentDiv">
                        <h1 className="Name">{item.name}</h1>
                    </div>        
                </div>
            );
        }
    });

现在渲染dataDislay产生错误，即无法将对象渲染为react子对象。为什么array.filter返回对象数组。

allData是一个对象数组，其中每个对象都存储用户数据

Answer 1

Filter返回满足回调条件的元素数组。您应该在此过滤后的数组上使用map方法将这些元素从对象转换为可渲染的React Elements

const dataDisplay = this.state.allData
    .filter(item => item.type === 'Startup')
    .map((item)=>(
                <div className="BlockForInvestor">
                    <div className="ImageDiv"><img src={item.link}></img></div>
                    <div className="ContentDiv">
                        <h1 className="Name">{item.name}</h1>
                    </div>        
                </div>
            );
    });

对象无法呈现为React Child（使用array.filer（）方法时出错）

1 个答案: