我正在使用react-image-gallery
来显示图库。我需要从json响应加载图像。我的代码如下,
let imagesArray = [
{
original: 'images/products/4.jpg'
},
{
original: 'images/products/2.jpg'
},
{
original: 'images/products/3.jpg'
}
];
export default class Products extends React.Component {
loadGallery () {
var requestUrl = 'http://myurl';
var myInit = { method: 'GET',
mode: 'cors',
cache: 'default' };
fetch(requestUrl).then(response =>
response.json().then(data => ({
data: data,
status: response.status
})
).then(res => {
let imagesArray = imagesArray.map((img,i)=>{ return {original: res.data[i].path.split(':')[1]}})
}));
}
render() {
return (
<div className="products-page" onLoad={ this.loadGallery() }>
<ImageGallery
ref={i => this._imageGallery = i}
items={imagesArray}/>
</div>
);
}
}
我收到 Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
如果我使用let newArray = imagesArray.map((img,i)=>{ return {original: res.data[i].path.split(':')[1]}})
,则会将值分配给newArray
在这里如何将json响应分配给imagesArray
?
答案 0 :(得分:1)
如果我理解的是正确的,您想要加载一组图像并将数据作为数组传递给ImageGallery
组件。
您的代码也有错误/不受欢迎:
当你这样做时,
<div className="products-page" onLoad={this.loadGallery()}>
您实际上会在每个渲染上调用函数loadGallery()
,而只应传递函数原型。
<div className="products-page" onLoad={this.loadGallery}>
下面您将看到实现您的要求的另一种方法。在这里,我们将加载图像并使用JSON响应中的新Product
更新imagesArray
组件的状态。因此,当状态更新时,组件将重新呈现并将新数据传递给ImageGallery
组件。
const dummyImagesArray = [
{
original: 'images/products/4.jpg'
},
{
original: 'images/products/2.jpg'
},
{
original: 'images/products/3.jpg'
}
];
export default class Products extends React.Component {
constructor(props) {
super(props);
this.state = {
imagesArray: dummyImagesArray
}
}
loadGallery () {
var requestUrl = 'http://myurl';
var myInit = { method: 'GET',
mode: 'cors',
cache: 'default' };
fetch(requestUrl).then(response =>
response.json().then(data => ({
data: data,
status: response.status
})
).then(res => {
const imagesArray = this.state.imagesArray.map((img,i) => { return { original: res.data[i].path.split(':')[1] }; });
this.setState({ imagesArray });
}));
}
render() {
return (
<div className="products-page" onLoad={this.loadGallery}>
<ImageGallery
ref={i => this._imageGallery = i}
items={this.state.imagesArray}
/>
</div>
);
}
}
答案 1 :(得分:0)
因此JSON实际上并不存在于React中。您可能需要做的是设置一个表示JSON数据的类并将其返回到地图。基本上正在做的是逐个剥离对象的图层。等等,
class ImagesArray extends React.Component() {
render() {
return {
<image src={this.props.original}/>
}
}
}