不要直接改變狀態。使用的setState（）反應/無直接突變狀態

我有這樣的代碼：不要直接改變狀態。使用的setState（）反應/無直接突變狀態

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

    } 
}

這是給我一個警告ESLint：

不要直接變異狀態。使用setState（） react/no-direct-mutation-state。

現在我到底該怎麼辦，因爲我不能用setState內constructor直接，因爲它創造error和更新這樣給我的錯誤。

來源

2017-06-16 Jenna Wesley

設置'this.state'不必是第一個發言;你可以先設置各種'var's，然後使用它們來組成'this.state'。 –

只是要拋棄這裏，在狀態中存儲React組件可能不是最好的方向 – rossipedia

確實，更好的解決方案是在渲染對象中使用「{！this.state.username && }」。 –

首先，我們不應該UI組件店內狀態變量，國家應該只包含數據。所有的用戶界面部分應該在render方法內。

如果你想render某些組件基於任何數據，然後使用conditional rendering。檢查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值，所以直接使用this.props.username，我這樣做，是因爲不知道完整的代碼。

來源

2017-06-16 14:18:21

好的。我在視圖中看到了使用條件的觀點。但是，當這個財產只能由父母控制時，爲什麼我會將道具財產存放在國有財產中呢？ –

@JennaWesley男士，我只是展示了更好的方式，不知道你的完整代碼。你不應該在'state'中存儲'props'，並且直接使用'this.props.username'。 –

我想可能是你正在更新該組件的某個地方，這就是爲什麼。 –

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

或者您可以使用的setState在componentWillMount()

componentWillMount(){ 
    let loginButton = props.username == null? <GoogleButton></GoogleButton>: ''; 
    this.setState({loginButton: loginButton}); 
}

來源

2017-06-16 14:10:48 Andrew

第一種方法會導致代碼混亂，但是我可以做類似的事情。先準備變量，然後'this.state = ...' –

問題是關於'構造函數'，但'componentWillMount'是個好地方。 – oklas

如何更新ReactJS中constructor的狀態？

創建數據結構，修改它的需求，並在結束時，一切都過去了分配到狀態：

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

來源

2017-06-16 14:42:57 oklas

不要直接改變狀態。使用的setState（）反應/無直接突變狀態

回答

相關問題