Javascript ReactJS：如何在React中将组件附加到应用程序组件

我试图在主“App”组件中附加一个由一些数组项组成的“Item”组件。但是组件将被替换为新的数组项，而不是追加。以下是代码片段：

//the App render function
render: function() {
    return ( 
        <div> 
        {
            this.state.productDisplayed.map(function(product, i) {
                return ( 
                    <Item source = {product.url} prodId = {product.id}  key = {product.id} />
                )
            })
        }

        </div>
    )
}


//The Item render function
render: function(){
    return(
        <div className = "col-sm-4" >   
            <img src = {this.props.source} width = "70%" className = "img-responsive"></img>
            <div>{this.props.prodId} 
            </div>
        </div>
    )
}

//应用程序呈现函数
render:function（）{
报税表（
{
this.state.productDisplayed.map（函数（产品，i）{
报税表（
)
})
}
)
}
//项渲染函数
render:function（）{
返回(
{this.props.prodId}
)
}

“ProductDisplayed”是一个数组，它被新项目替换，然后使用“for”循环显示新项目

---

如何将项目附加到主应用程序组件中，就好像我正在向主应用程序组件添加一些额外的项目一样。我正在尝试实现无限滚动。

为了将项目附加到应用程序组件中，您需要将数据附加到

productDisplayed

状态数组中

为此，您可以执行以下操作

addItem=(item)=>{
     var productDisplayed=[...this.state.productDisplayed];
     productDisplayed.push(item);
     this.setState({productDisplayed});
} 

---

您可以在某些事件上调用此函数

addItem

。

您需要将它们附加到您所在状态的数组中。我使用函数参数来设置状态，因为下一个状态依赖于上一个状态

component ProductList extends React.Component {
    constructor() {
        super()
        this.setState({
            productDisplayed: []
        });
    }

    getMoreItems = ( startingId ) => {
        Api.getMoreItems(startingId).then(this.addItems);
    }

    addItems = ( items ) => {
        this.setState(( prevState ) => ({
          updatedItems: [...prevState.productDisplayed, ...items]
        }));
    }

    render() {
        // no changes
        // something triggers this.getMoreItems(id)
    }
}

---

这在很大程度上取决于在productDisplayed状态中实际“附加”（在本例中为替换）items数据的代码。但是是的，这两个答案中的原理都能满足你的需要。渲染取决于状态。将项附加到状态，而不是替换它。