Question

我有一个按钮，当点击时调用一个按案例数量对产品进行排序的功能。我正在更新products数组，所以我认为这会触发重新渲染正在下面的代码中映射的产品，但事实并非如此。有没有人知道如何让它触发products.map再次重新渲染，从而显示新的排序产品？

render() {
    const {products} = this.props;
    const cartIcon = (<Icon name="shopping-cart"  style={styles.cartIcon} />);

    sortCartItems = () => {
        products.sort((a, b) => a.cases > b.cases);
    }

    return (            
        <View style={styles.itemsInCartContent}>
            <View style={styles.cartHeader}>
                <TouchableOpacity onPress={sortCartItems}>
                    {cartIcon}
                    <Text>Sort</Text>
                </TouchableOpacity>
            </View>
            {products.map((product, index) =>
                <CartProductItem
                    ref="childCartProductItem"
                    key={product.id}
                    product={product}
                    index={index}
                    activeIndex={this.state.active}
                    triggerParentUpdate={() => this.collapseAllOtherProducts}
                />
            )}
        </View>
    );
}

Answer 1

组件不应该改变它自己的道具。 If your data changes during the lifetime of a component you need to use state.

您的内联箭头函数sortCartItems会尝试改变来自道具的products。您需要将产品存储在组件状态中，并调用setState来更改它们，这将触发重新渲染。

class MyComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            products: props.products,
        }
    }

    sortCartItems = () => {
        this.setState(prevState => ({products: prevState.products.sort((a, b) => a.cases > b.cases);}))
    }

    render() {...}
}

请注意，只要您根据以前的状态更新状态，就需要在setState中使用回调。回调接收旧状态作为参数并返回新状态。

Answer 2

我使用了messerbill和trixn的答案组合来提出以下现在正在使用的内容。我向州添加了一个product属性，从props.products

接收数据

render() {
    const cartIcon = (<Icon name="shopping-cart"  style={styles.cartIcon} />);

    sortCartItems = () => {
        this.setState({
            products: this.state.products.sort((a, b) => a.cases > b.cases)
        });
    }

    return (            
        <View style={styles.itemsInCartContent}>
            <View style={styles.cartHeader}>
                <TouchableOpacity onPress={sortCartItems}>
                    {cartIcon}
                    <Text>Sort</Text>
                </TouchableOpacity>
            </View>
            {this.state.products.map((product, index) =>
                <CartProductItem
                    ref="childCartProductItem"
                    key={product.id}
                    product={product}
                    index={index}
                    activeIndex={this.state.active}
                    triggerParentUpdate={() => this.collapseAllOtherProducts}
                />
            )}
        </View>
    );
}

为什么我的项目没有在React中排序（重新渲染）？

2 个答案: