作为前端开发，我最开心的事情就是总有新的东西可以学习。但我们可能花了一生去掌握各种编程语言、库和框架，但仍然一无所知。因为我们都在学习，这也意味着我们都容易犯错误。没关系，我们的目的是变得更好。如果你犯了错误并从中吸取教训，你就做得很好！但是，如果你没有学到任何新东西并且一遍又一遍地犯同样的错误，emmm。..也许你的事业会停滞不前。本着这种精神，以下是我在CodeReview担任初级开发人员时经常看到的三个错误。让我们一起检查一下并讨论如何修复它。直接修改状态在更新React组件的状态时，最重要的是调用setState方法进行更新，传入的对象是一个新的副本，而不是直接修改之前的状态。如果您错误地修改了组件的状态，ReactDiff算法将无法捕捉到更改，并且您的组件将无法正确更新。让我们看一个例子。假设你有这样一个状态：this.state={colors:['red','green','blue']}现在你想给这个数组添加颜色：//方法1：this.state.colors。push('yellow')//方法二：this.state.colors=[...this.state.colors,'yellow']两种方法都不对！在类组件中更新状态时，必须使用setState方法，注意不要改变原始对象。下面是向数组添加元素的正确方法：this.setState(prevState=>({colors:[...prevState.colors,'yellow']}))忘记setState的批量更新有两种方法使用设置状态。第一种方法是传入一个对象作为参数。第二种方式是传入一个函数作为参数。你知道这两种方法应该在什么时候使用吗？例如，如果您有一个可以启用或禁用的按钮，您可能有一个名为isDisabled的状态，其中包含一个布尔值。如果你想切换这个按钮的状态，你可能会写一段这样的代码：//setStatetakesanobjectasaparameterthis.setState({isDisabled:!this.state.isDisabled})所以，哪里错了有了这个？问题在于React状态更新可以分批处理（batchUpdate），这意味着多个状态更新可以在一个更新周期内发生。如果您的更新将被分批处理并且您对isDisabled状态进行了多次更新，那么最终结果可能不是您所期望的。更新状态更正确的方法是提供先前状态的函数作为参数：this.setState(prevState=>({isDisabled:!prevState.isDisabled}))多次更新都是在操纵isDisabled状态，但每次更新都依赖于正确的前一个状态，所以你总能得到预期的结果。对于类似递增的计数器也是如此。//不要这样做this.setState({counterValue:this.state.counterValue+1})//正确的写法this.setState(prevState=>({counterValue:prevState.counterValue+1}))忘记了setState是异步的最后，重要的是要记住setState是一种异步方法。初学者可以先把它理解为异步，但是严格来说还是要分清条件的。例如：它在React的内部生命周期和事件处理程序中是异步的。例如：在setTimeout函数中调用setState是同步的。例如，假设我们有一个具有以下状态的React组件：this.state={name:'John'}和一个更新状态并将新状态打印到控制台的方法：this.setState({name:'Matt'})console.log(this.state.name)你可能认为它会打印Matt，但它不会！它将打印约翰！这是因为setState是异步的。这意味着当执行setState时，实际更新的操作会在异步队列中执行，但它下面的同步代码会立即执行，所以打印出来的状态不会是最新的。如果你想在更新完成后获取最新状态，React允许你传递一个回调函数，该函数将在更新完成后运行。this.setState({name:'Matt'},()=>console.log(this.state.name))问题解决了！现在它正确地记录了Matt。总结起来！以上就是今天和大家分享的React中常见的三个错误以及改正方法。请记住，犯错误是可以的，但要避免犯同样的错误。你在学习，我在学习，我们都在学习。让我们继续学习，一起变得更好。
