使用条件渲染时，如何在加载页面时渲染元素？

Question

目前我的元素仅在硬重置时呈现，我认为这是因为加载时我的状态设置为 Null，IDK 如何制作它以便存储我的 div 最简单/最好的方法是什么？ 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>请帮忙

Answer 1

尝试这个：

componentDidMount() {

  this.setState({healthData: JSON.parse(localStorage.getItem('user_data'))})

}

React 不知道状态已更新，如果您不使用setState.

Answer 2

有一些事情可能会导致问题。

您没有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>;

}

Answer 3

您直接改变 componentDidMount 方法中的状态。这不是反应的目的。相反，您使用 setState 方法设置状态，并且组件将重新渲染。

 componentDidMount() {

    this.setstate({healthData : JSON.parse(localStorage.getItem('user_data'))})

}

在渲染方法中，您可以使用对象解构来保存状态健康数据，如下所示，并在条件渲染中编辑以下代码，如下所示 -

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>