Question

我有一个react-native-pdf组件，用于更新onPageChanged上的redux存储（状态）数据。它的父组件正在使用mapStateToProps。更改页面后，将立即调用状态更改的reducer。但是，状态更新后，组件将开始无限循环地重新渲染。

我不确定为什么这种情况是无限发生的，而不是只有一次。我尝试在各个点进行控制台日志记录。该存储仅被更新一次（如预期的那样）。但此后，重新渲染无限循环开始。如果我不打电话给props.addMetadata()减速器，就不会出现问题

以下是代码：

function PdfReader(props) {
...
    
    const { params } = props.route;
    const { progress = 0, totalPages, type } = props.books[params.index]; //get progress, total pages from books in redux store

...
    function updateMetadata(details){
        
      if(details.type!=type||details.totalPages != totalPages || details.progress != progress){
            console.log('metadata updated') // **this happens only once as expected**
            props.addMetadata(details, params.index)
        }
    }

    function goPrev() { pdf.setPage(page - 1) }
    function goNext() { pdf.setPage(page + 1) }
...

console.log('loaded pdf reader') // **This is being logged infinitly**
    return (
        <View style={styles.container}>
            <Pdf
                ...
                ref={(pdf) => { this.pdf = pdf; }}
                page={progress}
                source={{uri : state.docUrl}}
                onLoadComplete={(numberOfPages,filePath)=>{
                    console.log(`number of pages: ${numberOfPages}`);
                }}

                onPageChanged={(page,numberOfPages)=>{
                    console.log(`current page: ${page}`);
                    setPage(page)
                    // update progress in metadata
                    updateMetadata({ totalPages: numberOfPages, type: 'pdf', progress: page }, params.index)
            }} />
             </View>
)}

function mapStateToProps(state) {
    return {
        settings: state.settings,
        books: state.books
    };
}

export default connect(
    mapStateToProps,
    actions
)(PdfReader);

这是props.addMetadata

正在调用的reducer函数的一部分

     case 'add_metadata': {
            console.log('metada reducer called')
            let { data, index } = action.payload;
            let stateCopy = [...state];
            stateCopy[index] = { ...stateCopy[index], ...data };
            return stateCopy;
        }

请帮助我理解为什么可能会发生这种情况。

在Redux存储数据更新后，React Native组件将无限渲染

0 个答案: