ComponentWillReceiveProps不会第一次更新状态

Question

我的渲染方法如下

render() {
    const language = this.props.language.default.portal;

    const currentUserEmail = getUserEmail();


    let cars = carData.filterCars(this.props.carsToShow, this.props.filters);

    return (
        <div className="contentRight noPadding col-xl-10 col-lg-10 col-md-10 col-sm-9 col-xs-7">
            <div className="cars" style={{position: 'relative'}}>

                <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
                    <div>
                        {this.showMsg(cars)}
                        <Shuffle>
                        {cars.map((car, i) => {
                            const initialReg = car.initialRegistration.slice(0,3) + car.initialRegistration.slice(6,10);
                            // str.slice(1, 4) extracts the second character through the fourth character (characters indexed 1, 2, and 3)

                            return (
                                <div key={car.chassis} className="carBox noPadding" style={{position: "relative"}}>
                                    <div className="carBoxContent">

                                        <PhotoAndFavorites car={car} language={language} favoriteActions={this.props.actionFavorites} favorites={this.props.favorites}/>

                                        <div className="carNameAndDesc">
                                            <div><Link to="" style={{textDecoration: 'none'}}>{car.make} {car.model}</Link></div>
                                            <div>{car.desc}</div>
                                        </div>

                                        <div className="carPrice">
                                            <div>{car.price}</div>
                                            <div>{car.btw}</div>
                                        </div>

                                        <div className="extraFeatures" style={{marginBottom: 5, backgroundColor: '#eee'}}>

                                        </div>

                                        <div className="mainFeatures">
                                            <div><img src="../images/portal/user/status/fuel-icon.png" style={{height: 12}}/> <span>{car.fuel}</span></div>
                                            <div><img src="../images/portal/user/status/road-icon.png" style={{height: 12}}/> <span>{car.mileage}</span></div>
                                            <div><img src="../images/portal/user/status/calendar-icon.png" style={{height: 12}}/> <span>{initialReg}</span></div>
                                        </div>

                                        <MakeOfferButton{...this.props} car={car}/><


                                    </div>
                                </div>
                            );
                        })}
                        </Shuffle>
                    </div>
                </ReactCSSTransitionGroup>
                <div className="clearfix"/>
            </div>
        </div>
    );
}

Redux connect如下：

function mapStateToProps(state, ownProps){
    return {
        filters: state.filters,
        favorites: state.favorites,
        carsToShow: state.carsToShow,
        carsInCart: state.cart
    };
}

function mapDispatchToProps(dispatch){
    return {
        actionFavorites: bindActionCreators(actionFavorites, dispatch),
        actionsCart: bindActionCreators(actionCart, dispatch)
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(cars);

MakeOfferButton组件如下：

import React, {PropTypes} from 'react';
import {Link} from 'react-router';
import FontAwesome from 'react-fontawesome';
import {getUserEmail} from '../../../../components/homepage/login/getUserInfo';
import {cart_types} from './cars';

export default class MakeOffer extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            offer: ""
        }
    }

    componentWillReceiveProps(nextProps){
        const car = this.props.car;
        const userEmail = getUserEmail();
        let offer = "";

        if(nextProps.carsInCart.some(i => i.info.carID == car.id && i.info.user == userEmail)){
            offer = parseInt(nextProps.carsInCart.filter(i => i.info.carID == car.id && i.info.user == userEmail).map(c => c.info.offer)[0]);
        }

        this.setState({offer: offer});

    }

    makeAnOffer(car, userEmail, event){
        let dataToAdd = {type: cart_types.offer, info: {carID: car.id, user: userEmail, offer: this.state.offer}};
        this.props.actionsCart.addToCart(dataToAdd);
    }

    removeOffer(car, userEmail, event){
        let dataToRemove = {info: {carID: car.id, user: userEmail}};
        this.props.actionsCart.removeFromCart(dataToRemove);
    }

    handleOfferChange(event){
        (event.target.value < 1 ) ? this.setState({offer: ""}) : this.setState({offer: event.target.value});
    }

    render(){
        const language = this.props.language;
        const car = this.props.car;
        const userEmail = getUserEmail();

        return (
            <div className="addToCardButton">
                <div className="offerButtons" style={{postion: "relative"}}>
                    <button type="reset" className="btnReset" onClick={this.removeOffer.bind(this, car, userEmail)}><FontAwesome name="times"/></button>
                    <input type="number" pattern="[0-9]*" inputMode="numeric" placeholder="Your offer..." className="offerInput" value={this.state.offer} onChange={this.handleOfferChange.bind(this)}/>
                    <button type="submit" className="btnSubmit" onClick={this.makeAnOffer.bind(this, car, userEmail)}><FontAwesome name="check"/></button>
                </div>
            </div>
        );
    }

};

问题出在MakeOfferButton组件中。当我调用makeAnOffer函数时调用redux动作。这很好。

但是componentWillReceiveProps应该获得新道具并更新州提议。然后应该在我的输入中显示该状态。但这并没有发生。

当我点击第二个时，它会显示出来。第一个也是第二个。

为什么州没有第一次出现？

有什么建议吗？