Question

单击箭头时，“购物车项目视图”需要扩展该特定视图并折叠当前展开的任何其他视图。该产品的项目ID将传递到父组件，以更新要扩展（活动）的视图。尽管正在传递ID并将其设置在化简器中的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>
        );
    }
}

这是父组件函数，该函数将id传递给操作以及渲染器中的初始const声明：

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

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

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

        return {
            ...state,
            expandedItem: id
        }

Answer 1

由于您使用的是redux，因此您只需从子级redux存储中获取扩展的商品ID，而无需将其从父级传递下来。

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

1 个答案: