收到错误：“必须返回有效的 React 元素（或 null）”ReactJS 中的组件之一出错答案

【问题标题】：Getting the error: 'A valid React element (or null) must be returned' error with one of the component in ReactJS收到错误：“必须返回有效的 React 元素（或 null）”ReactJS 中的组件之一出错
【发布时间】：2017-02-27 11:46:33
【问题描述】：

下面是我的代码

 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）。你可能有返回未定义、数组或其他一些无效对象。

请帮帮我，谢谢。

【问题讨论】：

标签： reactjs render

【解决方案1】：

照大家说的做，然后像 this.state.show.section === true ? secondarySection : mainSection 一样从 this.state.show.section === true ? { secondarySection } : { mainSection } 中删除 {}

【讨论】：

【解决方案2】：

您的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>
  );

【讨论】：

应该是this.state.show.section === true ? secondarySection : mainSection 。感谢安德鲁，你注意到了。

【解决方案3】：

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

【讨论】：

您还应该添加一个包装器 return(
{this.state.show.section === true ? secondarySection : mainSection }
);

【解决方案4】：

变化：

*使用 {} 在 html 元素中使用 javascript 代码，一旦使用 {} 然后不要在其中放入另一个 {}，就像在三元运算符中使用的那样。

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

【讨论】：

还有什么问题吗？