获取错误：“必须返回有效的React元素（或null）”错误，其中一个组件位于ReactJS中

下面是我的代码

 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 }
    );
  }

我得到了这个错误：

必须返回有效的React元素或null。你可能有 返回未定义、数组或其他无效对象

---

请在这方面帮助我，谢谢。

你的第二部分是几个要素。如果渲染方法必须返回和，请将它们像包装一样包装，使其全部位于单个元素中。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>
  );

---

组件应该只返回一个元素。您需要将报税表包装在单个元素/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 }
    );
  }

---

这家伙说了吗，然后从这个.state.show.section==true中删除{}？{secondarySection}:{mainSection}像这样。state.show.section===true？第二节：主要节更改：

*使用{}在html元素中使用javascript代码，使用{}之后，使用no将另一个{}放入html元素中，就像在三元运算符中使用的那样

*JSX不能返回多个元素，因此请始终尝试将所有代码包装在一个或任何其他包装器元素中

试试这个：

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>
    );
}

---

应该是this.state.show.section==true？第二部分：主要部分。感谢Andrew的注意。您还应该添加一个包装返回{this.state.show.section===true？secondarySection:mainSection}；还有什么问题吗？