Reactjs react功能组件中的呈现未返回任何内容

我正在使用react从节点后端获取数据，并使用数据实现UI。我有条件地呈现了UI，但控制台中确实出现了一个错误，表示没有从呈现返回任何内容。这是我的密码

import React, { useEffect, useState } from "react";
import OT from "@opentok/client";
import { OTSession, OTPublisher, OTStreams, getPublisher } from "opentok-react";
import Connection from "./Connection";
import Publisher from "./Publisher";
import Subscriber from "./Subscriber";
import { useParams } from "react-router-dom";
import { connect } from "react-redux";
import { Creators } from "../../../services/redux/event/actions";
import { PropTypes } from "prop-types";

import { makeStyles, Container } from "@material-ui/core";

function Host(props) {
  const [connect, setConnect] = useState(false);
  const params = useParams();
  const { event, error, isCreatingEvent } = props;
  console.log(event, "event");
  const handleSessionOn = () => {
    setConnect(true);
  };

  useEffect(() => {
    props.getSingle(params.id);
  }, []);

  if (isCreatingEvent) {
    return <div>Loading .....</div>;
  }
  if (error) {
    return <div>Error: {error.error_message}</div>;
  }
  
  if (event.sessionId != undefined) {
    const { API_KEY: apiKey, sessionId, token } = event;
    console.log(apiKey, sessionId, token)
   
    
    return (
      <div style={{ zIndex: 100 }}>
        <Connection connect={connect} />
        <h3 style={{ color: "red" }}>This is apiKey connect</h3>
        <OTSession
          sessionId={sessionId}
          token={token}
          apiKey={apiKey}
          onConnect={handleSessionOn}
        >
          <Publisher />
          <OTStreams>
            <Subscriber sessionId={sessionId} />
          </OTStreams>
        </OTSession>
      </div>
    )
  }
}

Host.protoTypes = {
  event: PropTypes.object.isRequired,
  error: PropTypes.string,
};

const mapDispatchToProps = (dispatch) => {
  return {
    getSingle: (id) => {
      dispatch(Creators.getOneEvent(id));
    },
  };
};

const mapStateToProps = (state) => (
  console.log(state),
  {
    event: state.event.event,
    error: state.event.error,
    isCreatingEvent: state.event.isCreatingEvent,
  }
);

export default connect(mapStateToProps, mapDispatchToProps)(Host);

import React，{useffect，useState}来自“React”；
从“@opentok/client”导入OT；
从“opentok react”导入{OTSession、OTPublisher、OTStreams、getPublisher}；
从“/Connection”导入连接；
从“/Publisher”导入发布服务器；
从“/Subscriber”导入订阅服务器；
从“react router dom”导入{useParams}；
从“react redux”导入{connect}；
从“../../../services/redux/event/actions”导入{Creators}”；
从“属性类型”导入{PropTypes}；
从“@material ui/core”导入{makeStyles，Container}”；
功能主机（道具）{
const[connect，setConnect]=useState（false）；
const params=useparms（）；
const{event，error，iscreationEvent}=props；
控制台日志（事件，“事件”）；
常量handleSession=（）=>{
设置连接（true）；
};
useffect（（）=>{
props.getSingle（参数id）；
}, []);
if（isCreatingEvent）{
返回加载。。。。。；
}
如果（错误）{
返回错误：{Error.Error\u message}；
}
if（event.sessionId！=未定义）{
const{API_KEY:apiKey，sessionId，token}=event；
日志（apiKey、sessionId、令牌）
返回(
这是apiKey connect
)
}
}
Host.prototype={
事件：PropTypes.object.isRequired，
错误：PropTypes.string，
};
const mapDispatchToProps=（调度）=>{
返回{
getSingle：（id）=>{
调度（Creators.getOneEvent（id））；
},
};
};
常量mapStateToProps=（状态）=>(
控制台日志（状态），
{
事件：state.event.event，
错误：state.event.error，
isCreatingEvent:state.event.isCreatingEvent，
}
);
导出默认连接（mapStateToProps、mapDispatchToProps）（主机）；

---

谁能帮帮我吗？我使用redux状态与Vonage API连接，但未呈现OTSession。

您仅在

if

语句中调用了

return

函数。 您应该在

else

语句中调用

return

函数。 像这样

const { API_KEY: apiKey, sessionId, token } = event;
{event.sessionId != undefined ? (
  <div style={{ zIndex: 100 }}>
    <Connection connect={connect} />
    <h3 style={{ color: "red" }}>This is apiKey connect</h3>
    <OTSession
      sessionId={sessionId}
      token={token}
      apiKey={apiKey}
      onConnect={handleSessionOn}
    >
      <Publisher />
      <OTStreams>
        <Subscriber sessionId={sessionId} />
      </OTStreams>
    </OTSession>
  </div>
) : null}

const{API_KEY:apiKey，sessionId，token}=event；
{event.sessionId！=未定义(
这是apiKey connect
)：null}

当满足条件时，您将返回一个JSX，但从

其他

案例中不返回任何内容。如果您打算在这种情况下不渲染任何内容，请使用

return null

。如果您的条件不满足，则需要返回一些内容。只需在末尾添加

returnnull