Javascript 为什么我的项目没有在React中排序（重新呈现）？

我有一个按钮，当点击时调用一个函数，该函数按大小写对产品进行排序。我正在更新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>
    );
}

render（）{
const{products}=this.props；
常数cartIcon=（）；
排序项目=（）=>{
产品分类（（a，b）=>a.cases>b.cases）；
}
报税表（
{cartIcon}
分类
{products.map（（产品，索引）=>
此.collapseAllOtherProducts}
/>
)}
);
}

一个组件不应该改变它自己的道具

您的内联箭头函数

sortCartItems

尝试变异来自道具的

产品。您需要将产品存储在组件状态，然后调用
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
中使用回调。回调函数将旧状态作为参数接收，并返回新状态。
我使用了messerbill和trixn的答案组合，得出了下面的答案，现在可以使用了。我向state添加了一个products属性，它从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>
    );
}

render（）{
常数cartIcon=（）；
排序项目=（）=>{
这是我的国家({
产品：this.state.products.sort（（a，b）=>a.cases>b.cases）
});
}
报税表（
{cartIcon}
分类
{this.state.products.map（（产品，索引）=>
此.collapseAllOtherProducts}
/>
)}
);
}
可能状态需要更改？将
onPress={sortCartItems}
更改为
onPress={this.sortCartItems.bind（this）}
和
sortCartItems=（）=>{products.sort（（a，b）=>a.cases>b.cases）；}
更改为
sortCartItems=（）=>{products.sort（（a，b）=>a.cases>b.cases）；this.forceUpdate
@Messervill这是一个反模式。你永远不应该改变道具，
forceUpdate
不应该这样使用。React为此提供了有状态的组件。遗憾的是，我们鼓励React不要解释反对票（以停止报复）。也许可以考虑添加一个OP可以做什么的例子？我在Read教程中有链接部分，详细解释了如何在反应中使用状态。提问者显然没有做任何研究，因为这是react中最基本的事情之一。我不知道我为什么要在这里复制react文档。我不小心否决了这个！纠正了我的错误；）@进化Xbox不鼓励解释反对票？每当我否决一个问题时，它就会显示一条横幅，要求我添加一条评论，解释我认为错误/应该改进的地方。你从哪里得到这些信息的？解释自己只是一个好习惯。除此之外，这次否决票是一次意外。我多次被鼓励不要解释否决票，而是发表评论以帮助改进问题@trixn所说的并不是完全错误的….
forceUpdate（）
如果没有必要的话就不应该使用，但有时我也不知道如何解决它（因为我对反应也很陌生），这是有效的….但是你在这里“支付”性能这是更好的，但你应该使用
setState（）
而不是直接修改state对象。啊，好的，我已经更新了它，使用setState（），它可以工作了@Messervill我使用react已有相当长的一段时间了，而且是在规模适中的项目中使用，而且从未使用过
forceUpdate
。这一切都可以通过
道具
和
状态
完成。如果您发现自己经常使用它，您可能没有按react方式进行操作。@Messervill No它所做的是通过跳过
shouldComponentUpdate
手动触发重新渲染。它的名字是怎么说的。调用它不会使任何东西发生变异。但当然，如果您自己对
状态
或
道具
进行了变异，则会导致组件呈现变异状态。问题是react不知道您直接改变了什么，也不能批处理多个状态更改以防止不必要的重新渲染。