收到錯誤：「一個有效的做出反應元素（或空）必須返回」錯誤與ReactJS

Question

組件之一下面是我的代碼

render() { 
    const mainSection = (
    <MainSection 
     title={ __('main.section.title') } 
     onClose={ this.handleOnClose } 
    /> 
); 

    const secondarySection = (

     { 
     this.state.error ? (
     <Message 
      onClose={ this.handleMessageClose } 
      style={ styles.message } 
     > 
      { this.state.error } 
     </Message> 
     ) : null 
     } 

     <div> 
     <SecondaryForm 
      data={ { 
       username: this.state.username, 
       } } 
       onChangeUsername={ this.handleUsernameChange } 
       onSaveUsername={ this.handleSaveUserName } 
     /> 
     </div> 
); 
    return (
     this.state.show.section === true ? { secondarySection } : { mainSection } 
    ); 
    } 

我得到這個錯誤：

A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

請幫我這個，謝謝。

Answer 1

您的secondarySection是一對元素。如果您的渲染方法必須返回<X1/>和<X2/>，請將它們包裝爲<div><X1/><X2/></div>，以使其全部位於單個元素內。 React假定每個組件都是一個元素或null，所以它拒絕其他任何東西。

const secondarySection = (
    <div> 
     { 
     this.state.error ? (
     <Message 
      onClose={ this.handleMessageClose } 
      style={ styles.message } 
     > 
      { this.state.error } 
     </Message> 
     ) : null 
     } 

     <div> 
     <SecondaryForm 
      data={ { 
       username: this.state.username, 
       } } 
       onChangeUsername={ this.handleUsernameChange } 
       onSaveUsername={ this.handleSaveUserName } 
     /> 
     </div> 
    </div> 
); 

Answer 2

組件應該只返回一個元素。你需要將你的返回包裹在一個元素/ div中。

你的代碼應該是這樣的：

render() { 
    const mainSection = (
    <MainSection 
     title={ __('main.section.title') } 
     onClose={ this.handleOnClose } 
    /> 
); 

    const secondarySection = (
     <div> 
     { 
      this.state.error ? (
      <Message 
       onClose={ this.handleMessageClose } 
       style={ styles.message } 
      > 
      { this.state.error } 
      </Message> 
     ) : null 
     } 

     <SecondaryForm 
      data={ { 
       username: this.state.username, 
       } } 
       onChangeUsername={ this.handleUsernameChange } 
       onSaveUsername={ this.handleSaveUserName } 
     /> 
     </div> 
); 
    return (
     this.state.show.section === true ? { secondarySection } : { mainSection } 
    ); 
    } 

Answer 3

做那傢伙說，只是從this.state.show.section === true ? { secondarySection } : { mainSection }刪除{}像this.state.show.section === true ? secondarySection : mainSection

Answer 4

變化：

*使用{}使用JavaScript代碼在HTML元素內部，一旦你使用{}然後沒有把另一個{}裏面，就像你用在te三元運算符。

* JSX不能返回多個元素，因此總是嘗試將所有代碼包裝在<div>或其他任何包裝元素中。

試試這個：

render() { 
    const mainSection = (
    <MainSection 
     title={ __('main.section.title') } 
     onClose={ this.handleOnClose } 
    /> 
); 

    const secondarySection = this.state.error ? 
     <div> 
      <Message 
       onClose={ this.handleMessageClose } 
       style={ styles.message } 
      > 
       { this.state.error } 
      </Message> 
      <SecondaryForm 
       data={ 
       {username: this.state.username,} 
       } 
       onChangeUsername={ this.handleUsernameChange } 
       onSaveUsername={ this.handleSaveUserName } 
      /> 
     </div> 
     : null; 

    return(
     <div> 
      {this.state.show.section === true ? secondarySection : mainSection } 
     </div> 
    ); 
}