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

Question

单击箭头时，购物车项目视图需要展开该特定视图并折叠当前展开的任何其他视图。该产品的项目 id 被传递给父组件以更新要扩展（活动）的视图。虽然，id 被传递并设置在 reducer 中的 expandItem 属性上，但它不会更新到子组件（即使它作为子组件上的 prop 传递）。当子组件在最后重新评估时，expandedViewItem 仍然是 0，这是它的默认值。有谁知道如何让子组件接收更新后的扩展项值？为什么还是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函数更新app状态：

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

        return {
            ...state,
            expandedItem: id
        }

Answer 1

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