Question

我正在尝试在主“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>
    )
}

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

我如何附加项目，好像我正在向主App组件添加一些额外的项目。我正在尝试实现无限滚动。

Answer 1

要将商品附加到您的应用组件，您需要将数据附加到productDisplayed州数组

为此，您可以执行类似

的操作

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

你可以在某个事件上调用此函数addItem。

Answer 2

您需要将它们附加到您所在州的数组中。我已经将函数参数用于setState，因为你的nextState取决于你以前的状态。

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)
    }
}

ReactJS：如何在React中将组件附加到App组件

2 个答案: