React 状态值在传递给模型时变为 null

Question

我有 AboutMeText 状态并且它通过道具成功更新，我成功显示了它的值<h6>{this.state.AboutMeText}</h6>，但是当我尝试将此状态值传递给模型时，它的值变为空。我已经尝试过 {this.state.AboutMeText}或{this.props.AboutMeText}没有工作请帮助我先生，我是 React js 的新手 <DIV className="template-profile">   <Image     url={this.state.selectedImages.profilePicture}     mode={"Profile"}   />   <h6>Hello I'm</h6>   <h1 className="template-profile-name">     Nabnit Jha   </h1>   <h6>     {this.state.AboutMeText} // here state value display successfully   </h6>   <DIV className="template-self-info">     <Modals modalBody={this.state.AboutMeText} modalHeading="About Me"></Modals> // here state value became null   </DIV> </DIV>

Answer 1

如果我正确理解您的问题。您需要设置默认状态以避免空数据

如果在类的构造函数中使用类组件，则应设置状态的默认值

class SomeComponent extends React.Component {

   constructor(props) {

    super(props);

    this.state = {

         someData: []

    };

   }

}

如果你使用功能组件，你应该使用反应钩子

const SomeComponent = () => {

   const [items, setItems] = useState([]); // default value empty array

};

Answer 2

根据以下条件打开您的模型 -

               <DIV className="template-profile">

                    <Image

                        url={this.state.selectedImages.profilePicture}

                        mode={"Profile"}

                    />

                    <h6>Hello I'm</h6>

                    <h1 className="template-profile-name">

                        Nabnit Jha

                    </h1>

                    <h6>

                    {this.state.AboutMeText} // here state value display successfully

                    </h6>

                    <DIV className="template-self-info">

                        {modelStatus&&<Modals modalBody={this.state.AboutMeText} modalHeading="About Me"></Modals>}

                        //here state value became null

                    </DIV>

                </DIV>

实现它的功能

功能clickHandle

clickHandle=()=>{

  this.setState({modelStatus:true})

}

您根据您的要求使用您的功能。