Question

我2周前开始学习反应，我正在写一个phonegap应用程序使用react来解决我在大学的最后一个项目。我今天遇到了一些问题，但没有找到答案。基本上我有一个带有计时器，搜索组件的拍卖组件。我将每个拍卖的道具保留在App内部的状态，这反过来呈现一个呈现所有拍卖的主页。拍卖数组填充在App中的componentWillMount（）内（来自服务器的数据）。每当我点击搜索按钮时，它就会在Home内启动一个axios调用（就像想要的那样）并立即进入App中componentWillMount（）内的axios调用，该调用将禁用搜索功能。我尝试用旗帜停止它，shouldcomponentMount等等，无法解决，如果有人能帮助我，我会非常感激。

app组件：

componentWillMount() {
    // Lifecycle function that is triggered just before a component mounts
    this.getAuctionsByParams([1, 2], 50, 900, 0);
    }
//call function to get auctions from serveer
    getAuctionsByParams(cities, lowPrice, highPrice, catCode) {
        const self = this;
        axios.post(auctionWS + 'GetAuctionByParam', {
            cities: cities,
            lowPrice: lowPrice,
            highPrice: highPrice,
            catCode: catCode
        }).then(function (response) {
            let res = JSON.parse(response.data.d);
            res.map(self.addAuction);
        })
            .catch(function (error) {
                console.log(error);
            });

    },

//add auction to state array
    addAuction(item, i) {
        let arr = this.state.auctionsArr;
        let newAuction = {
            code: item.AuctionID,
            endDate: item.End_Date,
            price: item.Price,
            percentage: item.Percentage,
            prodName: item.ProdName,
            prodDesc: item.ProdDesc,
            imgArr: item.Images,
        }
        arr.push(newAuction);
        this.setState({ auctionsArr: arr });
    },
renderHome() {
    return (
        <Home offerBid={this.offerBid} auctionsArr={this.state.auctionsArr}/>
    );
},

主页组件：

searchTriggered(cities, lowPrice, highPrice, catCode) {
    this.setState({ auctionsArr: [] });
    this.getAuctionsByParams(cities, lowPrice, highPrice, catCode);
}
//call function to get auctions from serveer
getAuctionsByParams(cities, lowPrice, highPrice, catCode) {//same func as in App - enters here with correct params}

//add auction from server to array
addAuction(item, i) {//same func as in App}

//function that returns a render of 1 auction
eachAuction(item, i) {
    return <Auction key={i} index={i} auctionfinished={this.deleteAuction} offerBid={this.offerBid}
        home="true" imgArr={item.imgArr} prodName={item.prodName} prodDesc={item.prodDesc} 
        price={item.price} endDate={item.endDate} code={item.code}
        percentage={item.percentage} />
}

//remove finished auction from displayed array
deleteAuction(i) {
    console.log(`delete: ${i} --- ${this.state.auctionsArr[i]} `)
    var arr = this.state.auctionsArr;
    arr.splice(i, 1);
    this.setState({ auctionsArr: arr });
    this.state.auctionsArr.map(function(item,i){console.log(i + "____" +  item.endDate + ":::::::" + item.price)})
}

offerBid(i) {
    this.props.offerBid(i);
}

render() {
    return (
        <div>
            <Swipeable onTap={this.openSearchModal}>
                <FontAwesome name='search' border="true" className="fa-3x" tag="div" />
                <Modal
                    isOpen={this.state.searchModalIsOpen}
                    onRequestClose={this.closeSearchModal}
                    contentLabel="open search``"
                    className="box" >
                    <Search closeModal={this.closeSearchModal} startSearch={this.searchTriggered} />
                </Modal>
            </Swipeable>
            <div className="container-fluid">
                {this.state.auctionsArr.map(this.eachAuction)}
            </div>
        </div>
    );
}

编辑：事实证明，出于某种原因，每当我按下搜索按钮时，整个页面（app.html）都会刷新，从而导致这种情况发生。我正在寻找原因，但是如果有人知道什么可能会导致它会非常有帮助

EDIT2： 我发现了问题，我有一个导致刷新的FORM标签

ReactJs App组件从子函数重新渲染

0 个答案: