React类组件中的状态管理陷阱

在React开发中，尤其是使用类组件时，状态管理是一个关键部分。然而，如果处理不当，可能会引发一些意想不到的问题。今天我们来探讨一个常见但容易被忽视的问题：在类组件中如何正确地管理数组状态。

背景

最近，我遇到了一位开发者，他试图在React类组件中管理产品的计数器。他创建了一个上下文（context），并在main.jsx中使用了这个上下文，希望通过上下文来管理产品的增加和减少操作。然而，他遇到了一个问题：调用上下文中的方法时，控制台报错"is not a function"。

问题分析

我们先来看看这位开发者的代码：

Main.jsx

state = [ {productName: "food", count: 0, id:0}, // ... 其他产品 ... ]; increase = (id = 0) => { let newState = [...this.state]; newState[id].count += 1; this.setState(newState); } render() { return ( <> <MyContext.Provider value={ { increase: this.increase, state: this.st