Javascript 需要解释React js中的setState问题吗

我想管理我的状态，因为每当我单击按钮时，该状态应将“monkey”添加到以前的状态。我的初始状态值为空。如果我将state设置为text:prevState.text+'monkey'，没关系。但是如果我使用+=而不是分号prevState.text+='monkey'，当我单击按钮时，“monkey”会出现两次。这是我的组件。我想知道为什么monkey会出现两次

import React, { Component } from 'react';

class App extends Component {
  state={
    text:''
  }
  onClickHandler=()=>{
    this.setState(prevState=>prevState.text+='monkey'

    )
  }
  render() {
    return (
      <div>
        <button onClick={this.onClickHandler}>
          press
        </button>
        {this.state.text}
      </div>
    );
  }
}
export default App;`

import React，{Component}来自'React'；
类应用程序扩展组件{
陈述={
文本：“”
}
onClickHandler=（）=>{
this.setState（prevState=>prevState.text+='monkey'
)
}
render（）{
返回(
按
{this.state.text}
);
}
}
导出默认应用程序`

设置状态

将新状态对象作为参数，或将函数作为返回对象的函数。您没有返回对象，而是返回

state.monkey

+“monkey”的值。试试这个：

onClickHandler=（）=>{
this.setState（prevState=>（{
text:prevState.text+='monkey'
}))
}

---

请记住，如果prevstate.text已经是“monkey”，那么您将得到“monkey”+=“monkey”，这实际上是“monkeymonkey”。

setState

将一个新的状态对象作为参数，或是一个返回对象的函数。您没有返回对象，而是返回

state.monkey

+“monkey”的值。试试这个：

onClickHandler=（）=>{
this.setState（prevState=>（{
text:prevState.text+='monkey'
}))
}

---

请记住，如果prevstate.text已经是“monkey”，那么您将得到“monkey”+=“monkey”，这实际上是“monkeymokey”。

除了将对象返回到状态而不是字符串之外，当您使用

setState（prevstate=>…）

时，您将状态作为参数传递

prevState.text += 'monkey'

与

prevState.text = prevState.text + 'monkey'

---

这直接改变了状态，导致了你的问题。本质上，您正在将

this.state.text直接更改为'monkey'，然后您的
setState
函数（异步）完成，并将
monkey
添加到该函数的末尾，因此除了使用
setState时将对象返回到状态而不是字符串之外，还可以使用'monkeymonkey'
（prevState=>…）
，您正在将状态作为参数传递

prevState.text += 'monkey'

与

prevState.text = prevState.text + 'monkey'

这直接改变了状态，导致了您的问题。您实际上是将
this.state.text
直接更改为'monkey'，然后您的
setState
函数，它是异步的，完成并将
monkey
添加到该函数的末尾，因此'monkeymonkey'
添加到该函数之后，您可以像这样进一步简化它

onClickHandler = () => {
  this.setState({
    text: this.state.text + 'monkey'
  })
}


添加到您可以进一步简化它，如

onClickHandler = () => {
  this.setState({
    text: this.state.text + 'monkey'
  })
}


最好使用函数模式。只需丢失“=”符号

 onClickHandler=()=>{
    this.setState(prevState=> { 
    return { text : prevState.text + 'monkey' }
    });
  }

最好使用函数模式。只需丢失“=”符号

 onClickHandler=()=>{
    this.setState(prevState=> { 
    return { text : prevState.text + 'monkey' }
    });
  }