Question

我正在使用 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);

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

Answer 1

您仅在 return 语句上调用了 if 函数。您应该在 return 语句上调用 else 函数。像这样。

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}

反应功能组件中的渲染没有返回任何内容

1 个答案: