Question

我正在将ExpandedItem变量传递给子组件，并且当应用程序状态更改时，它需要更新此变量值并将其重新发送给子组件。当前，当应用程序状态更改时，该值会在父级中更新，但不会重新发送到子级组件，因此它仍具有默认值。有人知道如何获取要重新发送到子组件的值吗？

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

render() {
    const isExpanded = this.props.expandedViewId === product.id;

父组件的渲染线：

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

在此处将expandedItem变量传递给子组件：

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

触发变量更新的函数：

expandAndCollapseItems = (id) => {
    this.props.dispatch(collapseCartItemViews(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

这里：

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

应该是

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

为什么传递给子组件的变量没有更新？

1 个答案: