javascript - 我得到了这个错误>>渲染没有返回任何内容。这通常意味着缺少 return 语句。或者,不渲染任何内容,返回 null
问题描述
如果 data.alarmMode === EMERGENCY,我想渲染模态组件,但是,我无法渲染任何内容并收到此错误。我试图解决这个问题,但我无法解决这个问题。我不知道为什么 react 不能渲染 Modal 组件。
return (
<Modal key={hash} hash={hash} data={alarmData[hash]} onClickAlarmOff={onClickAlarmOff} clockMode={clockMode} onClickCloseModal={onClickCloseModal} />
)
如果
import React, { useState } from 'react';
import CurrentTimeBox from './CurrentTimeBox';
import AlarmList from './AlarmList';
import AddAlarm from './AddAlarm';
import styles from './ClockBox.module.css';
import ModalEvent from '../containers/ModalEvent';
import { EMERGENCY, NIGHT } from '../constants';
import Modal from '../components/Modal';
import ClockModeBox from './ClockModeBox';
const ClockBox = ({ timeString, onClickCloseModal, makeModalvisible, currentTime, clockMode, modal, alarmData, onClickAlarmOn, onClickAlarmOff, ClockModeFunctionLists }) => {
return (
<div className={styles.ClockBox}>
<CurrentTimeBox currentTime={currentTime} />
<ClockModeBox ClockModeFunctionLists={ClockModeFunctionLists} clockMode={clockMode}/>
<div className={styles.AlarmLists}>
{Object.keys(alarmData).length > 1 && alarmData.dataLists.map((hash) =>{
const data = alarmData[hash]
return (
<AlarmList key={hash} hash={hash} data={data} onClickAlarmOn={onClickAlarmOn} onClickAlarmOff={onClickAlarmOff}/>
)
})
}
</div>
<AddAlarm />
{timeString.length > 0 && Object.keys(alarmData).length > 1 ? alarmData.dataLists.map((hash) => {
const data = alarmData[hash]
if (data.time === timeString && data.on) {
if (clockMode === NIGHT) {
if (data.alarmMode === EMERGENCY) {
makeModalvisible();
return (
<Modal key={hash} hash={hash} data={alarmData[hash]} onClickAlarmOff={onClickAlarmOff} clockMode={clockMode} onClickCloseModal={onClickCloseModal} />
)
} else {
return null;
}
}
makeModalvisible();
// if (modal) {
return (
<Modal key={hash} hash={hash} data={alarmData[hash]} onClickAlarmOff={onClickAlarmOff} clockMode={clockMode} onClickCloseModal={onClickCloseModal} />
)
// }
}
}) : null
}
</div>
)
};
export default ClockBox;
更新代码
return (
<div className={styles.ClockBox}>
<CurrentTimeBox currentTime={currentTime} />
<ClockModeBox ClockModeFunctionLists={ClockModeFunctionLists} clockMode={clockMode}/>
<div className={styles.AlarmLists}>
{Object.keys(alarmData).length > 1 && alarmData.dataLists.map((hash) =>{
const data = alarmData[hash]
return (
<AlarmList key={hash} hash={hash} data={data} onClickAlarmOn={onClickAlarmOn} onClickAlarmOff={onClickAlarmOff}/>
)
})
}
</div>
<AddAlarm />
{timeString.length > 0 && Object.keys(alarmData).length > 1 ? alarmData.dataLists.map((hash) => {
const data = alarmData[hash]
if (data.time === timeString && data.on) {
debugger;
if (clockMode === NIGHT) {
if (data.alarmMode === EMERGENCY) {
makeModalvisible();
return (
<Modal key={hash} hash={hash} data={alarmData[hash]} onClickAlarmOff={onClickAlarmOff} clockMode={clockMode} onClickCloseModal={onClickCloseModal} />
)
} else {
return null;
}
}
makeModalvisible();
// if (modal) {
return (
<Modal key={hash} hash={hash} data={alarmData[hash]} onClickAlarmOff={onClickAlarmOff} clockMode={clockMode} onClickCloseModal={onClickCloseModal} />
)
// }
} else {
return null;
}
}) : null
}
</div>
)
模态分量
import React from 'react';
import { VIBRATION, NORMAL, NIGHT } from '../constants';
import styles from "./Modal.module.css";
const Modal = ({ onClickCloseModal, data, clockMode, hash, onClickAlarmOff }) => {
const SOUND_EFFECT = 'https://pp.netclipart.com/pp/s/35-354079_jpg-transparent-library-hotel-front-desk-service-bell.png';
const VIBRATION_EFFECT = 'https://st2.depositphotos.com/4520249/7558/v/950/depositphotos_75586693-stock-illustration-vibration-mode-phone-icon.jpg';
let imgComponent = null;
switch(clockMode) {
case NORMAL:
imgComponent = <img src={SOUND_EFFECT} />
break;
case VIBRATION:
imgComponent = <img width="200px" height="200px" src={VIBRATION_EFFECT} />
break;
default:
return;
}
return (
<div className={styles.Modal} >
<div className={styles.ModalOverLay}></div>
<div className={styles.ModalContent}>
{imgComponent}
<p>{data.label}</p>
<button className={styles.CloseButton} onClick={() => {
onClickCloseModal();
onClickAlarmOff(hash);
console.log(33333)
}}>close</button>
</div>
</div>
)
}
export default Modal;
如果clockMode 不是'emergency,组件会正确渲染Modal 组件。但是,我想做的是在 if (data.alarmMode === EMERGENCY) 的情况下渲染 Modal 组件
我不知道为什么即使我使用了 return 语句,它也无法在这种情况下呈现。
更新
const modalOn = () => ({ type: MODAL_ON });
makeModalvisible: () => dispatch(modalOn())
mpdalOn 没有问题,我检查了模态状态已更改我已调试并且调试器进入if (data.alarmMode === EMERGENCY) 问题是当 ClockBox 组件无法呈现模态组件时......如果我使用退货声明
解决方案
我认为这可能是因为您在以下 if 语句之后没有 else 语句:if (data.time === timeString && data.on)
。所以当这个要求不满足时,React 将不知道要渲染什么。
推荐阅读
- linux - 在 SConstruct 中运行复制命令不起作用
- python - 如何将输入变量从一个函数传递到另一个函数而不需要多次输入?
- react-native - 如何上传“许多照片”,然后在我的反应原生应用程序中获取照片(作为列表)?
- java - 使用 Spring Data JPA 执行命名查询的数据库视图花费太长时间
- django - Django QuerySet 从一对多和从多对一
- sql - 我正在尝试使用(sql shell)显示postgres上已经存在的数据库,但我无法显示它们
- pytorch - 我在使用 pytorch 时收到此错误:RuntimeError:gather_out_cuda(): Expected dtype int64 for index
- javascript - 同步 spawn 和流事件输出 NodeJS
- laravel - 为什么资源控制器在 laravel 8 中不起作用?
- azure - 从 Azure 管道使用 Azure Active Directory 身份验证运行函数应用