Я делаю загрузку изображений в редуксе.После успешной загрузки, IMG будет отправлен обратно и будет показан.Я использую console.log в редукторе, похоже, он может получить обновленный список изображений, как показано на рис. , введите здесь описание изображения . Затем я использую console.log в mapStateToProps и дочернем компоненте.Я обнаружил, что массив тоже был доставлен, но в дочернем компоненте он не может отображаться автоматически.Я смущен по этому поводу
const initialState = {
isLoading: false, //
loadingStatus: 'READY', //是否下载成功 error success
detailData: {},
headerData: {
mainImage:"",
displayName:"",
signature: "Hello, I am Olivia! Nice to meet you:)",
gender: 0,
age: 0,
height: 161,
},
basicInfoData:[],
imageData:[
],
descriptionData:[],
tagData:[],
};
// reducer
case DT_UPLOAD_IMAGE_LIST_SUCCESS:
console.log('tyu',action.data);
return Object.assign({}, state, {
imageData:action.data.data,
});
default:
return state;
//then MapStateToProps
function mapStateToProps(state) {
console.log(state.dtUserInfoEditReducer.imageData);
return {
isLoading: state.dtUserInfoEditReducer.isLoading,
loadingStatus: state.dtUserInfoEditReducer.loadingStatus,
detailData: state.dtUserInfoEditReducer.detailData,
headerData: state.dtUserInfoEditReducer.headerData,
basicInfoData: state.dtUserInfoEditReducer.basicInfoData,
imageData: state.dtUserInfoEditReducer.imageData,
descriptionData: state.dtUserInfoEditReducer.descriptionData,
tagData: state.dtUserInfoEditReducer.tagData,
};
}
// image show component
const SPImageGallery = ({imageData, title}) => {
console.log(imageData);
return(
<DetailDiv>
<TitleDiv>{title}</TitleDiv>
<Gallery
images={imageData.map(({ id, imageUrl, index }) => ({
src: imageUrl,
orientation:'landscape',
useForDemo: true
}))}
showThumbnails
/>
</DetailDiv>
)
}
// gallery
const gallery = images.slice(0,14).map((obj, i) => {
//console.log('71',obj);
return (
<a
href={obj.src}
className={css(classes.thumbnail, classes[obj.orientation])}
key={i}
onClick={(e) => this.openLightbox(i, e)}
>
<img src={obj.src} alt=""/>
</a>
);
});