Reactjs 为什么我的应用程序状态的更改不会导致在我的子组件中重新渲染？

展开购物车项目视图时，需要折叠所有其他购物车项目视图。问题是我的项目视图是一个单独的组件，需要从父级传递此信息。单击箭头时，项目id将从子组件传递回父组件，然后传递到操作，最后是应用程序状态更新的减速器。这会在父组件中触发重新渲染，但不会向下延伸到需要重新渲染的子组件，即使已更改的属性正在传递给子组件。有人知道谁将获得此应用程序状态更改以在子组件中重新渲染吗

这是我的购物车项目视图（子组件）。isExpanded变量需要从应用程序状态更改中得到更新，以便控制应展开和折叠哪些视图

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

render() {
    const serverUrl = getServerAddress();
    const {product} = this.props;
    const price = product.iogmodPrice ? product.iogmodPrice : product.price;
    const isExpanded = this.props.expandedViewId === product.id;
    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.props.onExpandClick(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>
    );
}

父组件的渲染线：

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

减速器功能：

export function collapseCartItemViews(id) {
    return (dispatch, getState) => {
        dispatch({
            type: types.SET_EXPANDED_STATE,
            id: id
        });
    }
}

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

        return {
            ...state,
            expandedItem: id
        }

---

在包含箭头的

TouchableOpacity

元素中，尝试将

onPress

功能更改为：

onPress={（）=>this.props.onExpandClick（product.id）；this.setState（this.state）；}

---

这将在单击时触发重新渲染。

在购物车视图中，您需要使用比较运算符设置isExpanded。如下所示：const isExpanded=this.props.expandedViewId===product.id；啊，是的，你说得对。我更新了它，但应用程序状态更改仍然没有使用新值进入子组件。有什么想法吗？商店是否更新了正确的Id？

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

        return {
            ...state,
            expandedItem: id
        }