Javascript 不要直接改变状态。使用setState（）反应/无直接突变状态

我有以下代码：

constructor(props) {
    super(props)
    this.state = {
        loginButton: '',
        benchmarkList: ''
    }
    if (props.username == null) {
        this.state.loginButton = <GoogleButton></GoogleButton>
    } else {

    }
}

构造函数（道具）{
超级（道具）
此.state={
登录按钮：“”，
基准列表：“”
}
如果（props.username==null）{
this.state.loginButton=
}否则{
}
}

它给了我一个警告：

不要直接改变状态。使用setState（） 反应/无直接突变状态

---

现在我该怎么办，因为我不能直接在

构造函数中使用
setState
，因为这样创建和更新会给我带来错误。
首先，我们不应该将ui组件存储在状态变量中，状态应该只包含数据。所有ui部分都应该在
render
方法中

constructor(props) {
    super(props)
    this.state = {
      loginButton: props.username == null? <GoogleButton></GoogleButton>: '',
      benchmarkList: ''
    }
  }

如果要基于任何数据渲染某个组件，请使用。检查
this.state.loginButton
的值，如果该值为
null
则呈现该按钮

像这样：

constructor(props) {
    super(props)
    this.state = {
        loginButton: props.username,
        benchmarkList: ''
    }
}

render(){
    return(
        <div>
            {!this.state.loginButton ? <GoogleButton></GoogleButton> : null}
        </div>
    )
}

构造函数（道具）{
超级（道具）
此.state={
登录按钮：props.username，
基准列表：“”
}
}
render（）{
返回(
{！this.state.loginButton？：null}
)
}

理想情况下，我们不应该将
props
值也存储在
state
中，因此直接使用
this.props.username
，我这样做是因为不知道完整的代码

如何在ReactJS中更新构造函数中的状态

创建数据结构，根据需要对其进行修改，并在所有操作完成后将其指定给状态：

constructor(props) {
    super(props)
    let state = {
        loginButton: '',
        benchmarkList: ''
    }
    if (props.username == null) {
        state.loginButton = true
    } else {
        state.loginButton = false
    }
    this.state = state
}

只需添加setState

if (props.username == null) {

       this.setState({
            loginButton: <GoogleButton></GoogleButton>
       })

} else {



if（props.username==null）{
这是我的国家({
登录按钮：
})
}否则{
Setting
this.state
不一定是第一个语句；您可以先设置各种
var
s，然后使用它们来组合
this.state
。这里要说明的是，将React组件存储在state中可能不是最好的方法，更好的解决方案是使用
{！this.state.username&&}
在渲染对象中。@rossipedia为什么，它会减慢渲染或状态更改检测？虽然从技术上讲，没有什么可以阻止您这样做，但它违反了将所有UI逻辑放在
渲染（）中的惯例
method。我记不清了，但我记得读到过一些其他的问题。第一种方法会让代码变得凌乱，但我可以做一些类似的事情。首先准备变量，然后
this.state=…
问题是关于
构造函数
但是
组件将lMount
是个好地方。好吧。我明白你在视图中使用条件属性的意思。但是，当道具属性仅由父级控制时，我究竟为什么要将道具属性存储到状态属性中呢？@JennaWesley man，我刚刚演示了更好的方法，不知道你的完整代码。你不应该将
道具
存储在
状态中
另外，请直接使用
this.props.username
。我想您可能正在更新此组件中的某个值，这就是原因。谢谢。我学到了很多，并且已经实现了此答案的技巧
if (props.username == null) {

       this.setState({
            loginButton: <GoogleButton></GoogleButton>
       })

} else {