Question

我试图使用forEach或map函数没有成功（xxx不是函数错误）。决定使用旧的for循环，但不是创建多个div元素，我的程序只渲染一个。

简化示例：

getTest(){
    const l = this.props.renderedDrugs.length;

    for(var i = 0; i < l; i++){
        return <div>{this.props.renderedDrugs[i].id}</div>
    }
}

render() {

    const test = (this.props.renderedDrugs) ? this.getTest() : nope()

    function nope(){
        return 'nope'
    }
    return (
        <div>{test}</div>
    )
}
}

无论我做什么，我都无法返回多个div，但是多个控制台日志没有问题。我是否因为像傻瓜一样盯着屏幕而完全忘记的基本反应函数中遗漏了一些重要的东西？

Answer 1

您确实需要map：

getTest() {
    return this.props.renderedDrugs.map(rd => <div>{rd.id}</div>)
}

只有一个渲染的原因是因为return <div>{this.props.renderedDrugs[i].id}</div>，你知道，从函数中返回该值。 map更清晰，但您可以使用for循环和数组模拟地图：

getTest(){
    const l = this.props.renderedDrugs.length;
    const ary = [];

    for(var i = 0; i < l; i++){
        ary.push(<div>{this.props.renderedDrugs[i].id}</div>);
    }
    return ary;
}

条件渲染反应问题（循环）

1 个答案: