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 {&nbsp; &nbsp;constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;someData: []&nbsp; &nbsp; };&nbsp; &nbsp;}}如果你使用功能组件，你应该使用反应钩子const SomeComponent = () => {&nbsp; &nbsp;const [items, setItems] = useState([]); // default value empty array};

Answer 2

根据以下条件打开您的模型 -&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<DIV className="template-profile">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url={this.state.selectedImages.profilePicture}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mode={"Profile"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h6>Hello I'm</h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 className="template-profile-name">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Nabnit Jha&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.AboutMeText} // here state value display successfully&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DIV className="template-self-info">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {modelStatus&&<Modals modalBody={this.state.AboutMeText} modalHeading="About Me"></Modals>}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //here state value became null&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </DIV>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </DIV>实现它的功能功能clickHandleclickHandle=()=>{&nbsp; this.setState({modelStatus:true})}您根据您的要求使用您的功能。