- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我将我的 React 应用程序从 16.3+ 更新到 React 17,同时升级到 crate-react-app@4.0.2。一切都按预期工作,但我在控制台中看到以下内容:
Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See react-unsafe-component-lifecycles for details.
* Move code with side effects to componentDidMount, and set initial state in the constructor.
Please update the following components: SideEffect(NullComponent)
我的 App.jsx 文件:
import React, { useRef, useEffect, useCallback, createRef } from 'react';
import { useDispatch, useSelector, batch } from 'react-redux';
import './App.scss';
import { CountryBox, Error, MasterBox, MetaTags, ModalContainer, ScreenLoader } from '../../components';
import { dataActions, settingsActions, statisticsActions, statisticsUpdatesActions } from '../../store/actions/actions';
import { engineService } from '../../services';
import { coreUtils } from '../../utils';
const App = (props) => {
const dispatch = useDispatch();
// Refs.
const elRefs = useRef([]);
// State variables.
const settingsList = useSelector((state) => state.settings.settingsList);
const loadingList = useSelector((state) => state.settings.loadingList);
const sourcesList = useSelector((state) => state.data.sourcesList);
const countriesList = useSelector((state) => state.data.countriesList);
const { isActive, isRefreshMode, viewType, isDisplayError, activeModalName,
activeModalValue, isReplaceModalMode, isActionLoader } = settingsList;
const { loadingPrecentage, isScreenLoaderComplete } = loadingList;
// Functions to update the state.
const onSetStateCurrentTime = (data) => dispatch(statisticsActions.setStateCurrentTime(data));
const onSetStateSettingsList = (listName, listValues) => dispatch(settingsActions.setStateSettingsList(listName, listValues));
const onSetStateStatisticsField = (fieldName, fieldValue) => dispatch(statisticsActions.setStateStatisticsField(fieldName, fieldValue));
const onSetStateStatisticsList = (statisticsList) => dispatch(statisticsActions.setStateStatisticsList(statisticsList));
const onSetStateStatisticsUpdatesSettingsList = (statisticsUpdatesSettingsList) => dispatch(statisticsUpdatesActions.setStateStatisticsUpdatesSettingsList(statisticsUpdatesSettingsList));
const onSetStateDataCollection = (collectionName, collectionValue) => dispatch(dataActions.setStateDataCollection(collectionName, collectionValue));
const onSetStateInitiateSettings = (data) => {
const { settingsList, loadingList } = data;
batch(() => {
dispatch(settingsActions.setStateSettingsList('settingsList', settingsList));
dispatch(settingsActions.setStateSettingsList('loadingList', loadingList));
});
};
const onSetStateInitiateSources = (data) => {
const { sourcesList, countriesList, countriesNameIdList, statisticsList, settingsList } = data;
batch(() => {
dispatch(dataActions.setStateDataCollection('sourcesList', sourcesList));
dispatch(dataActions.setStateDataCollection('countriesList', countriesList));
dispatch(dataActions.setStateDataCollection('countriesNameIdList', countriesNameIdList));
dispatch(settingsActions.setStateSettingsList('settingsList', settingsList));
dispatch(statisticsActions.setStateStatisticsList(statisticsList));
});
};
const onSetStateUpdateRound = (data) => {
const { countriesList, statisticsList, updateStatisticsUpdatesListResults } = data;
const { statisticsUpdatesList, statisticsUpdatesSettingsList } = updateStatisticsUpdatesListResults;
batch(() => {
dispatch(dataActions.setStateDataCollection('countriesList', countriesList));
dispatch(statisticsActions.setStateStatisticsList(statisticsList));
if (statisticsUpdatesList && statisticsUpdatesList.length > 0) {
dispatch(statisticsUpdatesActions.setStateStatisticsUpdatesList(statisticsUpdatesList));
dispatch(statisticsUpdatesActions.setStateStatisticsUpdatesSettingsList(statisticsUpdatesSettingsList));
}
});
};
const onSetStateActionUpdate = (data) => {
const { countriesList, settingsList } = data;
batch(() => {
dispatch(dataActions.setStateDataCollection('countriesList', countriesList));
dispatch(settingsActions.setStateSettingsList('settingsList', settingsList));
});
};
const onSetStateActionRefresh = (data) => {
const { countriesList, settingsList, statisticsList, updateStatisticsUpdatesListResults } = data;
const { statisticsUpdatesList, statisticsUpdatesSettingsList } = updateStatisticsUpdatesListResults;
batch(() => {
dispatch(dataActions.setStateDataCollection('countriesList', countriesList));
dispatch(settingsActions.setStateSettingsList('settingsList', settingsList));
dispatch(statisticsActions.setStateStatisticsList(statisticsList));
if (statisticsUpdatesList && statisticsUpdatesList.length > 0) {
dispatch(statisticsUpdatesActions.setStateStatisticsUpdatesList(statisticsUpdatesList));
dispatch(statisticsUpdatesActions.setStateStatisticsUpdatesSettingsList(statisticsUpdatesSettingsList));
}
});
};
const onSetStateUpdateCountryVisibility = (data) => {
const { countriesList, countriesNameIdList, statisticsList, statisticsUpdatesList } = data;
batch(() => {
dispatch(dataActions.setStateDataCollection('countriesList', countriesList));
dispatch(dataActions.setStateDataCollection('countriesNameIdList', countriesNameIdList));
dispatch(statisticsActions.setStateStatisticsList(statisticsList));
if (statisticsUpdatesList && statisticsUpdatesList.length > 0) {
dispatch(statisticsUpdatesActions.setStateStatisticsUpdatesList(statisticsUpdatesList));
}
});
};
// Run the engine.
useEffect(() => {
engineService.runEngine({
mode: props.mode,
onSetStateCurrentTime: onSetStateCurrentTime,
onSetStateSettingsList: onSetStateSettingsList,
onSetStateStatisticsField: onSetStateStatisticsField,
onSetStateStatisticsList: onSetStateStatisticsList,
onSetStateStatisticsUpdatesSettingsList: onSetStateStatisticsUpdatesSettingsList,
onSetStateInitiateSettings: onSetStateInitiateSettings,
onSetStateInitiateSources: onSetStateInitiateSources,
onSetStateUpdateRound: onSetStateUpdateRound,
onSetStateDataCollection: onSetStateDataCollection,
onSetStateActionUpdate: onSetStateActionUpdate,
onSetStateActionRefresh: onSetStateActionRefresh,
onSetStateUpdateCountryVisibility: onSetStateUpdateCountryVisibility
});
return () => {
engineService.clearSources();
};
}, []);
// Set loader for each master action.
useEffect(() => {
engineService.updateActionLoader(false);
}, [countriesList]);
// After exit from any modal - Scroll back to the element's vertical position.
const scrollToCountry = useCallback((data) => {
const { action, value } = data;
if (action === 'modal' && !value && activeModalValue && !isReplaceModalMode && activeModalName !== 'country') {
setTimeout(() => {
const offsetTop = elRefs.current.find(c => c.current?.dataset?.countryId === activeModalValue).current.offsetTop;
if (offsetTop > window.innerHeight) {
window.scrollTo(0, offsetTop);
}
}, 10);
}
}, [elRefs, activeModalValue, isReplaceModalMode]);
// Update action on master modal click.
const handleActionClick = useCallback((e) => {
if (!isActionLoader) {
const data = {
action: coreUtils.getAttributeName(e, 'data-action'),
value: coreUtils.getAttributeName(e, 'name'),
id: coreUtils.getAttributeName(e, 'data-country-id')
};
scrollToCountry(data);
engineService.runMasterActionClick(data);
}
}, [elRefs, activeModalValue, isReplaceModalMode]);
// Update action on relevant modal change.
const handleModalActionChange = useCallback((e) => {
engineService.runModalActionUpdate({
modalName: coreUtils.getAttributeName(e, 'data-modal-name'),
action: coreUtils.getAttributeName(e, 'data-action'),
value: coreUtils.getValue(e)
});
}, []);
// Validate all OK to show the data and generate the countries.
const isInitiateComplete = !isDisplayError && countriesList && countriesList.length > 0 && loadingPrecentage === 100;
const renderCountries = useCallback(() => {
const countriesDOM = [];
const refsList = [];
for (let i = 0; i < countriesList.length; i++) {
const country = countriesList[i];
const ref = elRefs.current[i] || createRef();
refsList.push(ref);
countriesDOM.push(
(<CountryBox
key={country.id}
{...country} // React memo works only with separated properties.
isRefreshMode={isRefreshMode}
sourcesList={sourcesList}
onActionClick={handleActionClick}
ref={ref}
/>));
}
elRefs.current = refsList;
return countriesDOM;
}, [countriesList]);
return (
<div className="main">
{MetaTags}
{!isScreenLoaderComplete &&
<ScreenLoader
isActive={isActive}
loadingList={loadingList}
isDisplayError={isDisplayError}
/>
}
{isDisplayError &&
<Error
isDisplayError={isDisplayError}
/>
}
{activeModalName &&
<ModalContainer
onActionClick={handleActionClick}
onActionChange={handleModalActionChange}
/>
}
{isInitiateComplete &&
<div className="page">
<div className="main-container">
<div className={`container ${viewType} f32 f32-extra locations`}>
<MasterBox
onActionClick={handleActionClick}
/>
{renderCountries()}
</div>
</div>
</div>
}
</div>
);
};
export default App;
我该如何解决这个问题?
最佳答案
好的,我解决了。
问题在于名为 MetaTags 的组件之一:
MetaTags.jsx
import React from 'react';
import { Helmet } from 'react-helmet';
import { timeUtils } from '../../../utils';
const MetaTags =
(<Helmet>
<title data-rh="true">World Covid 19 Data | Covid 19 World Data | {timeUtils.getTitleDate()}</title>
</Helmet>);
export default MetaTags;
react-helmet
包已过时,我需要安装“react-helmet-async”,并将代码更改为:
app = (
<HelmetProvider>
<Suspense fallback={null}>
<Provider store={createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)))}>
<Helmet>
<title data-rh="true">Dynamic title {timeUtils.getTitleDate()}</title>
</Helmet>
<BrowserRouter>
{component}
</BrowserRouter>
</Provider>
</Suspense>
</HelmetProvider>
);
这解决了我的问题,警告消失了。
关于reactjs - 警告 : Using UNSAFE_componentWillMount in strict mode is not recommended (upgrade to CRA 4. 0.2),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66045965/
我正在开发基于桌面 (Windows 7) 的应用程序,并使用 Qt Creator v 5.6.0 开发程序。我有一个非常奇怪的问题,即 我的程序在 DEBUG 模式下崩溃,但在 RELEASE 模
我爱org-tables ,我用它们来记录各种事情。我现在正在为 Nix 记录一些单行代码(在阅读了 Domen Kožar 的 excellent guide 后,在 this year's Eur
org-mode 是否有一个键绑定(bind)可以在编号/项目符号列表项之间移动,就像您可以对标题一样? 喜欢的功能: org-forward-heading-same-level 大纲下一个可见标题
我知道这有点小,但它一直困扰着我。我正在为一个项目使用 Org-mode,我倾向于经常导出为 PDF 或 HTML,这使我的目录中散落着 PDF、Tex 和 HTML 文件。有没有办法将 Org 模式
有什么方法可以让 org-mode 继续编号列表而不是重新启动? 这是情况。你列了一个类似的列表: Sometimes you can restart the display by doing som
如何在组织模式文件中生成所有标签的枚举列表(例如 :tag:)?假设我有一个以下形式的列表: * Head1 :foo:bar: ** Subhead1 :foo: * Head2
我正在使用 org-mode(Emacs:24.3.1,org-mode: 7.9.3f 8.0.6)作为不同代码片段的数据库语言(目前主要是 elisp 和 python)。这在使用 org-mod
相关问题:org-mode: fontify code blocks natively 截至 2012 年 11 月 1 日,我已经获得了最新的 org-mode 和 emacs 版本(组织存储在 o
有谁知道在使用 ido 模式时区分 dired 模式缓冲区名称与迷你缓冲区中其他类型缓冲区的好方法吗?例如...在 dired 模式缓冲区名称末尾显示正斜杠? 最佳答案 您可以简单地更改dired-m
在这个示例脚本中 import argparse parser = argparse.ArgumentParser() parser.add_argument('--modes', help="tes
我第一次学习“操作系统”。在我的书中,我发现了关于“用户模式”和“内核模式”的这句话: "Switch from user to kernel mode" instruction is execute
我刚刚下载了 Processing 2.0 并尝试从“模式管理器”安装 Android 模式。但是在安装时出现错误提示:“无法将模式“Android 模式”移动到速写本”。我怎样才能摆脱这个错误? 最
在 android L 中,我尝试将相机闪光灯模式设置为 TORCH,它工作正常,但我无法将其更改回闪光灯模式 AUTO 或闪光灯模式 打开。我只能返回闪存模式 OFF。我尝试了像 camera360
有 2 台机器,A 和 B。有 2 个分支,p16 和 c2。 A 有一个 ext3 文件系统,但在 B 上,存档位于带有 vfat 的 truecrypt 驱动器上,mount 显示 rw,uid=
我有 linum-mode在我的 Emacs 配置中全局启用。全局启用意味着它也适用于不受欢迎的速度条。 我为这个问题找到的唯一建议是在存档的 Emacs 帮助邮件列表中,它建议以下 speedbar
Google Cloud Firestore 将很快取代旧的 Google Cloud Datastore。然后可以选择在“ native 模式”或“数据存储模式”下使用 Cloud Firestor
org-mode的版本我的版本 Emacs 附带的(24.5.2) 是 8.2.10 .我已安装版本 8.3.1从 ELPA 并将其添加到我的 init 文件中: (add-to-list 'load
The org-mode manual指出 org-mode 将“”“...在 shell 链接”“”中执行命令,但它不显示此类链接的语法。 我希望能有一个简单完整的示例来说明这种 shell 链接是
我正在尝试在 emacs 24 中使用 dart 模式和 d 模式。如果我单独使用任何一种模式,一切都很好。如果我分别对每种类型的文件使用这两种模式,我在尝试缩进 D 代码时会出错。 以下是在初始化时
我的应用程序中有 CupertinoDatePicker 以使用以下代码选择日期和时间: formatColumn( widget: Consumer( builder: (_, mcProvide
我是一名优秀的程序员,十分优秀!