目前我的元素僅在硬重置時(shí)呈現(xiàn)，我認(rèn)為這是因?yàn)榧虞d時(shí)我的狀態(tài)設(shè)置為 Null，IDK 如何制作它以便存儲(chǔ)我的 div 最簡(jiǎn)單/最好的方法是什么？ constructor(props) { super(props); this.state = { healthData: null } } componentDidMount() { this.state.healthData = JSON.parse(localStorage.getItem('user_data')) } render() { //gets users data and renders it to <p> items const healthData = this.state.healthData; console.log(healthData); return healthData == null ? "" : ( <div className='main_Main'> <div className='meal_divs'> <p className='food_heading'>Status:</p> <p className='food_text'>Your age is: {this.state.healthData.age}</p> <p className='food_text'>Your gender is: {healthData.gender}</p> <p className='food_text'>Your goal is: {healthData.goal}</p> <p className='food_text'>Your height is: {healthData.height}</p> <p className='food_text'>your weight is: {healthData.weight}</p> </div>請(qǐng)幫忙
3 回答
搖曳的薔薇
TA貢獻(xiàn)1793條經(jīng)驗(yàn) 獲得超6個(gè)贊
嘗試這個(gè)：
componentDidMount() {
this.setState({healthData: JSON.parse(localStorage.getItem('user_data'))})
}
React 不知道狀態(tài)已更新，如果您不使用setState.
慕桂英546537
TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超10個(gè)贊
有一些事情可能會(huì)導(dǎo)致問題。
您沒有setState()在您的componentDidMount()
componentDidMount() {
this.setState({
healthData: JSON.parse(localStorage.getItem('user_data'))
});
}
您可以從使用您的語法healthData && <div />中受益render()
render() {
//gets users data and renders it to <p> items
const healthData = this.state.healthData;
return healthData && <div className='main_Main'>...</div>;
}
慕碼人2483693
TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊
您直接改變 componentDidMount 方法中的狀態(tài)。這不是反應(yīng)的目的。相反，您使用 setState 方法設(shè)置狀態(tài)，并且組件將重新渲染。
componentDidMount() {
this.setstate({healthData : JSON.parse(localStorage.getItem('user_data'))})
}
在渲染方法中，您可以使用對(duì)象解構(gòu)來保存狀態(tài)健康數(shù)據(jù)，如下所示，并在條件渲染中編輯以下代碼，如下所示 -
const { healthData } = this.state;
return(
<div className='main_Main'>
<div className='meal_divs'>
{
healthData === null ? "" :
(
<p className='food_heading'>Status:</p>
<p className='food_text'>Your age is: {healthData.age}</p>
<p className='food_text'>Your gender is: {healthData.gender}</p>
<p className='food_text'>Your goal is: {healthData.goal}</p>
<p className='food_text'>Your height is: {healthData.height}</p>
<p className='food_text'>your weight is: {healthData.weight}</p>
)
}
</div>
</div>
- 3 回答
- 0 關(guān)注
- 159 瀏覽
添加回答
舉報(bào)
0/150
提交
取消