我遇到的情况是,第一次加载页面时,应该在 Home.js
中加载的图像没有加载,直到在浏览器上推送刷新(Chrome ).这种情况发生在开发服务器和实时生产服务器中,有时必须多次刷新才能显示图像。
请注意,我对所有 Web 开发以及 React 都是新手,因为我的大部分经验都是在 Android 开发方面。
我认为这与我将图像加载到 Home 组件的方式有关。通过日志记录,我发现图像是在页面加载之前加载的(使用 componentDidMount()
),所以我正在寻找任何可用的解决方案。
谢谢,这是代码...
主要.js:
import React from 'react';
import { withRouter, Route, NavLink, HashRouter } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInstagram, faGithub, faFacebook } from '@fortawesome/fontawesome-free-brands';
import 'bootstrap/dist/css/bootstrap.css';
import Favicon from 'react-favicon';
import Home from './Home';
import Contact from './Contact';
import socialMediaLinks from './utilities/Utils';
class Main extends React.Component {
constructor() {
super();
this.state = {
screenWidth: null,
isMobile: false,
};
this.handleResize = this.handleResize.bind(this);
}
componentDidMount() {
window.addEventListener('resize', this.handleResize.bind(this));
this.handleResize();
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
}
handleResize() {
this.setState({ screenWidth: window.innerWidth });
console.log(`width is ${this.state.screenWidth}`);
}
render() {
return (
<HashRouter>
<div>
<Favicon url='./favicon.ico' />
{/* Navigation */}
<nav className='navbar fixed-top bg-dark flex-md-nowrap'>
{/* Social Media */}
<a className='social-media-link' href={socialMediaLinks['instagram']}><FontAwesomeIcon icon={faInstagram} size='lg' /></a>
<a className='social-media-link' href={socialMediaLinks['github']}><FontAwesomeIcon icon={faGithub} size='lg' /></a>
<a className='social-media-link' href={socialMediaLinks['facebook']}><FontAwesomeIcon icon={faFacebook} size='lg' /></a>
<ul className="header">
<li className='nav-option'><NavLink exact to='/'>Home</NavLink></li>
<li className='nav-option'><NavLink to='/contact'>About/Contact</NavLink></li>
</ul>
</nav>
{/* Main Page */}
<div className='content container-fluid' align='center'>
<div className='row'>
<Route exact path='/' component={withRouter(Home)} />
<Route path='/contact' component={withRouter(Contact)} />
</div>
<footer>Created by me :)</footer>
</div>
</div>
</HashRouter>
);
}
}
export default Main;
首页.js:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
var imageList = [];
function importAll(r) {
const keys = r.keys();
let images = {};
for (var k in keys) {
images[keys[k].replace('./', '')] = r(keys[k]);
}
return images;
}
const images = importAll(require.context('./images/resized/', false, /\.(png|jpe?g|svg)$/));
for (var image in images) {
var newImage = new Image(images[image], images[image], null);
newImage.name = images[image];
newImage.src = images[image];
imageList.push(newImage);
}
class Home extends React.Component {
render() {
let images = imageList.map(image => {
if (image.naturalHeight > image.naturalWidth) { // portrait
return <img className='portrait-img' src={image.src} alt=''/>
} else if (image.naturalHeight < image.naturalWidth) { // landscape
return <img className='landscape-img' src={image.src} alt=''/>
}
});
return (
<div>
{images}
</div>
);
}
}
export default Home;
index.css:
body {
background-color: #FFF;
padding: 20px;
margin: 0;
font-family: Helvetica;
}
h1 {
color: #111;
font-weight: bold;
padding-top: 2px;
}
ul.header li {
display: inline;
list-style-type: none;
margin: 0;
}
ul.header {
background-color: #111;
padding: 0;
}
ul.header li a {
color: #FFF;
font-weight: bold;
text-decoration: none;
padding: 20px;
display: inline-block;
}
.content {
background-color: #FFF;
padding: 20px;
}
.content h2 {
padding: 0;
margin: 0;
}
.content li {
margin-bottom: 10px;
}
.active {
background-color: #0099FF;
}
.portrait-img {
max-width: 55%;
height: auto;
padding: 5px;
}
.landscape-img {
max-width: 75%;
height: auto;
padding: 5px;
}
.navbar {
max-height: 110px;
background-color: #FFCC00 !important;
}
.content {
padding-top: 80px;
}
footer {
background-color: #FFF;
font-size: 7pt;
position: relative;
margin: auto;
float: left;
}
.social-media-link {
color: #111;
}
::-webkit-scrollbar {
display: none;
}
@media only screen and (max-width: 500px) {
h1 {
font-size: 18pt;
}
.navbar {
max-height: 120px;
}
.content {
padding-top: 104px;
}
.header {
font-size: 10pt;
}
.portrait-img {
max-width: 100%;
height: auto;
padding: 2px;
}
.landscape-img {
max-width: 100%;
height: auto;
padding: 2px;
}
footer {
font-size: 5pt;
}
.social-media-link {
padding: 5px;
}
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel='icon' href='../src/favicon.ico' type='image/x-icon' />
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Main from './Main';
import './index.css';
ReactDOM.render(
<Main />,
document.getElementById('root'),
);
编辑:
修改了下面的 Home.js 以使用 Promise。这里的想法是,渲染图像的 Promise 将改变 this.state.images
并且该值将在 Component 的 render()
返回的 HTML 中使用.这并不能解决问题,但是,它确实会导致记录 imgs
列表,而不是像以前那样记录 undefined
列表。
import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import { resolve } from 'q';
var imageList = [];
function importAll(r) {
const keys = r.keys();
let images = {};
for (var k in keys) {
images[keys[k].replace('./', '')] = r(keys[k]);
}
return images;
}
const images = importAll(require.context('./images/resized/', false, /\.(png|jpe?g|svg)$/));
for (var image in images) {
var newImage = new Image(images[image], images[image], null);
newImage.name = images[image];
newImage.src = images[image];
imageList.push(newImage);
}
class Home extends React.Component {
constructor(props) {
super();
this.state = {
images: null,
};
}
componentDidMount() {
let promise = this.getImages();
promise.then(result => {
let images = result.map(image => {
if (image.naturalHeight > image.naturalWidth) { // portrait
return <img className='portrait-img' src={image.src} alt='' />
} else if (image.naturalHeight < image.naturalWidth) { // landscape
return <img className='landscape-img' src={image.src} alt='' />
}
});
this.setState({ images: images });
}, function(error) {
this.setState({ images: error });
});
}
getImages() {
let promise = new Promise((resolve, reject) => {
let imageList = [];
const images = importAll(require.context('./images/resized/', false, /\.(png|jpe?g|svg)$/));
for (var image in images) {
var newImage = new Image(images[image], images[image], null);
newImage.name = images[image];
newImage.src = images[image];
imageList.push(newImage);
}
if (imageList.length > 0) {
console.log(imageList);
resolve(imageList);
} else {
console.log('shit');
reject(Error('oh shit'));
}
});
return promise;
}
render() {
return (
<div>
{this.state.images}
</div>
);
}
}
export default Home;
这导致:
硬重载后(ctrl+F5):
images = [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
刷新后(ctrl+R):
images = [{...}, {...}, {...}, {...}, {...}, {...}, {...}, {...}]
- 都带有 typeof : Symbol(react.element),类型:“img”
。
最佳答案
console.log
不保证是同步的,因此您不能依赖它来确定执行顺序。有些引擎是,有些不是。
我也不会依赖 require.context
,尤其是当您使用 create-react-app
时。请参阅:https://github.com/facebook/create-react-app/issues/517
一般来说,如果您的元素已经为 ES 模块设置好并且您发现自己需要 require
,那么在我看来,这有点代码味道。 ES 模块的全部意义在于使作用域成为静态的,而不是动态的,这样编译器就可以推断出在缩小时要丢弃什么。目录结构在运行时实际上不再存在;它全部被缩小到一个大文件中,或者由 webpack 开发服务器即时压缩,或者作为生产构建的一部分。
文件是否太多而无法直接导入到模块中?您可以为 imageList
设置一个单独的模块来处理加载并导出它,然后只需 import
并直接在您的组件中使用:
// imageList.js
import foo from './images/foo.jpg'
import bar from './images/bar.jpg'
import baz from './images/baz.jpg'
import blah from './images/blah.jpg'
export default {
foo,
bar,
baz,
blah,
}
然后您可以进行测试以确保将来不会遗漏任何一个(注意,测试直接在节点中使用文件结构运行,而不是 webpack-ed 最终产品):
// __tests__/imagesList.test.js
import imageList from '../imageList'
import fs from 'fs'
import path from 'path'
const dir = path.join(__dirname, '..', 'images')
it('has all the images', () => {
const imageFiles = fs.readdirSync(dir).filter((file) => {
return path.extname(file).match(/\.(png|jpe?g|svg)$/)
})
expect(Object.keys(imageList)).toEqual(imageFiles)
})
如果真的太多了,或者它们会经常变化,我通常喜欢在命令行上自动创建代码。下面是快速 n 脏,但应该接近你需要的,具体取决于路径:
#!/usr/bin/env node
const { readdirSync, writeFileSync } = require('fs')
const { extname, join } = require('path')
const relPath = (...paths) => join(__dirname, ...paths)
const dir = relPath('src', 'images')
const printLoaderFile = () => {
const imageFiles = readdirSync(dir).filter((file) => {
return extname(file).match(/\.(png|jpe?g|svg)$/)
})
const output = []
imageFiles.forEach((file, index) => {
output.push(`import image${index} from '${dir}/${file}'`)
})
output.push('\nexport default {')
imageFiles.forEach((file, index) => {
output.push(` '${file}': image${index},`)
})
output.push('}\n')
writeFileSync(relPath('src', 'imagesList.js'), output.join('\n'))
}
printLoaderFile()
关于javascript - Home 组件仅在刷新时加载(而不是在初始加载时),竞争条件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54431391/