Question

我不知道为什么，但是在Redux操作中获取数据时出现无限循环。

我有一个带有Redux和ReactJS的应用程序。

这是我的React组件

const CustomersTable = (props) => {

    useEffect( () => { 
        props.getAllCustomers()
    }, []);

    return  <Table ...props.customers />
}

const mapStateToProps = (state) => ({
    customers: state.customers,
})

const mapDispatchToProps = dispatch => ({
    getAllCustomers: () => dispatch(getAllCustomers()),
})


export default connect(
    mapStateToProps, mapDispatchToProps
)(CustomersTable);

这是getAllInvoices()

const fetchCustomers = async() => {
    /**
     * I fetch only documents with flag delete==false
     */
    const snapshot = await firestore.collection("customers").where('deleted', '==', false).get()

    let data = []
    snapshot.forEach(doc => {
        let d = doc.data();
        d.id_db = doc.id
        //...other
        data.push(d)
    })

    return data
}
export const getAllCustomers = () => 
    async (dispatch) => {
        const customers = await fetchCustomers()
        // I reset state becouse I wont duplicate inovices in tables
        dispatch(actions.reset())

        customers.map(customer => dispatch(
            actions.fetch(customer)
        ))
    }

和减速器

const customerReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case types.FETCH_CUSTOMERS:
            return {
                ...state, list: [...state.list, action.item]
            }
        case types.RESET_CUSTOMERS:
            return {
                ...state, list: []
            }
        default:
            return state
    }
}

我希望减速器RESET_CUSTOMERS然后FETCH_CUSTOMERS完成工作。但是它仍然可以在循环reset-> customers中工作。

我认为useEffect中仍会提供该组件，但我认为该钩子写得很好。

我测试了其他减速器，它们是Customers的复制减速器，它们工作良好。

编辑1 @godsenal，感谢您的回复：

actions.js：

import types from './types'

const fetch = item => ({
    type: types.FETCH_CUSTOMERS, item
})

const reset = item => ({
    type: types.RESET_CUSTOMERS, item
})

export default {
    fetch,
    reset
}

关于<Table />，它是AntDesign组件（https://ant.design/components/table/）。没有它，它看起来就一样。

编辑2 不可思议。我从模块（客户）复制了所有文件，然后粘贴到合同目录中。然后，我将所有变量，功能等从客户更改为合同。现在它可以工作（仅合同），但是客户无限循环。也许某些东西干扰了结构外部。

编辑3 我在app.js中发现，我在mapStateToProps中向道具添加了customers。删除后（因为我在根组件中不需要它）开始工作正常。我怀疑<CustomerTable />中的访存方法会影响<App />组件，并且会在循环中呈现。我发现该组件仍未循环更新，而是在循环中挂载和卸载。

但是，我还是不明白一件事。在<App />中，我仍然在mapStateToProps中从商店（与客户相同）分发发票，在这种情况下，一切正常。

使用过程中的无限循环

0 个答案: