为什么在React本机中子组件没有从父组件接收更新的值？

Question

单击箭头时，购物车项视图需要展开该特定视图并折叠当前展开的其他视图。该产品的项id被传递给父组件，以更新要展开的视图（活动的）。虽然id是在reducer中的expandedItem属性上传递和设置的，但它不会更新到子组件（即使它是作为prop在子组件上传递的）。当在最后重新计算子组件时，expandedViewItem仍然为0，这是它的默认值。有人知道如何让子组件接收更新的expandedItem值吗？为什么还是0？？

请观看我调试此问题时制作的视频：https://youtu.be/qegxqaywdpy

render () {

const isExpanded = product.id === this.props.expandedViewId;

export default class CartProductItem extends Component {
    constructor(props) {
        super(props);
        this.state = {showCounter: false};
    }

    expandCartProductItem(id) {
        this.props.onExpandClick(id); 
        this.setState(this.state);
    }

    updateDisplay = (nextProps) => {
        // Null check is needed here as 0 is a valid value
        if (nextProps.activeIndex !== null && nextProps.activeIndex === this.props.index) {
            this.setState({
                showCounter: !this.state.showCounter
            });
        } else if (nextProps.activeIndex !== null && nextProps.activeIndex !== this.props.index) {
            this.setState({
                showCounter: false
            });
        }
    }

    componentWillReceiveProps(nextProps) {
        console.log('nextProps: ', nextProps)
    }

    render() {
        const serverUrl = getServerAddress();
        const {product} = this.props;
        const price = product.iogmodPrice ? product.iogmodPrice : product.price;

        const isExpanded = product.id === this.props.expandedViewId;

        const imageSrc = product.imageName
            ? 'https://b2b.martinsmart.com/productimages/'+ product.imageName.replace("Original", "Thumbnail")
            : serverUrl + '/b2b/resources/images/nophoto.gif';

        return (
            <View style={styles.pContainer}>
                <CartProduct
                    imageName={imageSrc}
                    name={product.description}
                    itemNum={product.id}
                    price={price}
                    pack={product.pack}
                    averageWeight={product.averageWeight}
                    cases={product.order_count}
                />

                <TouchableOpacity style={styles.buttonContainer} onPress={() => this.expandCartProductItem(product.id)}>
                    {isExpanded ? <LineIcon name="arrow-up" style={styles.arrowIcon} /> : <LineIcon name="arrow-down" style={styles.arrowIcon} />}
                </TouchableOpacity>

                {isExpanded &&
                    <ExpandHeightView height={70}>
                        <View style={styles.counterContainerView}>
                            <QuantityCounter style={{width: '100%'}} product={product} />
                        </View>
                    </ExpandHeightView>
                }
            </View>
        );
    }
}

expandAndCollapseItems = (id) => {
    this.props.dispatch(collapseCartItemViews(id));
}

render() {
    const {isLoading, displayDetails, sortCasesAsc, details, items, expandedItem} = this.props.orderInfo;

<FlatList 
    data={items}
    keyExtractor={(item, index) => item.id.toString()}
    renderItem={({item}) => <CartProductItem product={item} expandedViewId={expandedItem} onExpandClick={(id) => this.expandAndCollapseItems(id)} />}
/>

最后，这里是reducer函数更新应用程序状态：

    case types.SET_EXPANDED_STATE:
        const id = action.id;

        return {
            ...state,
            expandedItem: id
        }

Answer 1

由于您使用的是redux，您可以从子级的redux存储中获取展开的项id，而不是从父级传递它。