如何解决ReactJS承诺不会实现
我在React中工作,试图使我的主页自动化(使用一个组件来呈现引导布局组件)并从资产文件中渲染图片。 promise返回一个可以访问fileLocation的模块,我需要将其作为最终返回值。但是,每次我尝试访问它( .then(val => val.default [0])时,它都会发送另一个要解决的承诺。我尝试添加更多的 .then ,但是它不断给我同样的诺言。
这是代码:
function ReviewSection(props){
function renderPics(numRow,numCol) {
var render = [];
var children = [];
async function getPics(index){
var location = await import("./assets/img/index")
.then(val => val.default[index])
.then(data => data)
.catch(err => console.log(err));
return location
}
for (let i = 0; i < numRow; i++) {
for (let x = 0; x < numCol; x++) {
if(x % 2 === 0){
console.log(getPics(x).then(val => val.default[0]))
children.push(<Col><Image src={getPics(x)}/></Col>)
}
else{
children.push(<Col><div style={{width: "4rem"}}></div></Col>)
}
}
render.push(<Row>{children.map(val => val)}</Row>)
children = [];
}
return render.map(val => val)
}
return (
<Container >
<Row>
<Col>
{renderPics(props.rows,props.cols)}
</Col>
</Row>
</Container>
)
}
文件 ./ assets / img / index 如下:
// images.js
var trustedPartners = {
0: require('./trustedPartners/remax-logo-og.jpg'),1: require('./trustedPartners/coldwell.jpeg'),2: require('./trustedPartners/bluediamond.jpg'),3: require('./trustedPartners/exp.png'),4: require('./trustedPartners/greglynn.png'),5: require('./trustedPartners/kingsway.png'),6: require('./trustedPartners/liveurban.jpg'),7: require('./trustedPartners/maison.jpg'),8: require('./trustedPartners/prb.png'),9: require('./trustedPartners/rebroker.jpg'),10: require('./trustedPartners/woods.jpg'),11: require('./trustedPartners/paigefulton.jpg'),12: require('./trustedPartners/atlas.png'),13: require('./trustedPartners/meinhaus.png')
}
export default trustedPartners
解决方法
这不是使用promise的正确方法。您必须使用回调从API返回提取值。另一种方法是您返回API响应,而不是整个API。
function ReviewSection(props) {
function renderPics(numRow,numCol) {
var render = [];
var children = [];
async function getPics(index) {
var location = await import("./assets/img/index")
.then(val => {
return val.default[index];
}).catch(err => {
console.log(err)
return '';
});
}
for (let i = 0; i < numRow; i++) {
for (let x = 0; x < numCol; x++) {
if (x % 2 === 0) {
console.log(getPics(x))
children.push(<Col><Image src={getPics(x)}/></Col>)
} else {
children.push(<Col>
<div style={{width: "4rem"}}></div>
</Col>)
}
}
render.push(<Row>{children.map(val => val)}</Row>)
children = [];
}
return render.map(val => val)
}
return (
<Container>
<Row>
<Col>
{renderPics(props.rows,props.cols)}
</Col>
</Row>
</Container>
)
}
它应该对您有用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。