Question

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

这是我的购物车商品视图（子组件）。需要从应用程序状态更改中更新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>
    );
}

点击展开箭头后，商品ID将传回并发送到操作（父视图）：

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

购物车操作功能：

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

reducer函数：

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

        return {
            ...state,
            expandedItem: id
        }

Answer 1

在包含箭头的TouchableOpacity元素中，尝试将onPress函数更改为此：

onPress={() => this.props.onExpandClick(product.id); this.setState(this.state);}

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

为什么我的应用程序状态更改未引起子组件的重新渲染？

1 个答案: