redux prop.state можно отправить дочернему компоненту, но дочерний компонент не обновляется автоматически - PullRequest
0 голосов
/ 31 мая 2018

Я делаю загрузку изображений в редуксе.После успешной загрузки, 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>
      );
    });




            
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...