如何解决反应功能组件中的渲染没有返回任何内容
我正在使用 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,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。
解决方法
您仅在 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}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。