Reactjs 将存储阵列重新复制到Div元素列表

在我的redux存储中，有一个对象列表存储为数组，它在组件装载时加载。我想把它们列在一个div中，也做crud操作。这是我的实现。每当我使用useSelector为一个常量保存列表时，它都会显示无限多的日志

BranchAction.js

import axios from 'axios';

export const fetchAllBranchListOk = (branchList) => {
    return {
        type : 'FETCH_ALL_BRANCH_LIST_OK',
        branchList
    }
};

export const fetchAllBranchList = () =>{
    return (dispatch) => {
        return axios.get(`https://jsonplaceholder.typicode.com/posts`)
            .then(response => {
                dispatch(fetchAllBranchListOk(response.data));
            })
            .catch(error => {
                throw(error);
            });
    }
};

function BranchManagement() {
    store.dispatch(BranchAction.fetchAllBranchList());
    const AllBranch = useSelector(state => state.BranchReducer)
    return(
        <div>

        </div>
    )
}
export default BranchManagement;

import {combineReducers} from 'redux'
import BranchReducer from "./Admin/BranchReducer";

const Reducers = combineReducers({
   BranchReducer
});

export default Reducers;

BranchResducer

export default (state = [], action) => {
    switch (action.type) {
        case 'FETCH_ALL_BRANCH_LIST_OK' :
            return action.branchList;
        default:
            return state;
    }
};

BranchManagement.js

import axios from 'axios';

export const fetchAllBranchListOk = (branchList) => {
    return {
        type : 'FETCH_ALL_BRANCH_LIST_OK',
        branchList
    }
};

export const fetchAllBranchList = () =>{
    return (dispatch) => {
        return axios.get(`https://jsonplaceholder.typicode.com/posts`)
            .then(response => {
                dispatch(fetchAllBranchListOk(response.data));
            })
            .catch(error => {
                throw(error);
            });
    }
};

function BranchManagement() {
    store.dispatch(BranchAction.fetchAllBranchList());
    const AllBranch = useSelector(state => state.BranchReducer)
    return(
        <div>

        </div>
    )
}
export default BranchManagement;

import {combineReducers} from 'redux'
import BranchReducer from "./Admin/BranchReducer";

const Reducers = combineReducers({
   BranchReducer
});

export default Reducers;

---

如果您想

分派

从后台获取数据的操作，则应将这些调用保留在

useffect

hook中。useEffect的用途类似于类组件中生命周期方法的用途，如

componentDidMount

、

componentDidUpdate

和

componentWillUnMount

。要了解有关

useffect

的更多信息，请参阅

从“React”导入React；
从“react-redux”导入{useSelector，useDispatch}；
从“/path/to/BranchAction”导入BranchAction；
职能部门管理（）{
const dispatch=usedpatch（）；
//由于状态中的数据位于“branchList”上，因此可以直接返回
//`state.branchList`您将向您提供所需的数据。
const branchList=useSelector（state=>state.branchList）
//它的行为类似于“componentDidMount”。因为我们要传递“[]”
//“useffect”依赖项数组
useffect（（）=>{
分派（BranchAction.fetchAllBranchList（））；
}, [])
//这里我假设'branchList'是一个带有'name'和'id'的对象数组。
//更新了答案，branchList为[{“BranchHid”：1，“createdBy”：1，“isActive”：true，“branchDetails”：{“branchDetailsID”：1}，{“BranchHid”：2，“createdBy”：1，“isActive”：true，“branchDetails”：{“branchDetailsID”：1}]
返回(
{
（分支列表| |[]）.map（（分支，索引）=>{
{branch.branchID}
{branch.createdBy}
{branch.isActive}
{branch.branchDetails.branchDetailsID}
}
}
)
}
导出默认分支管理；

---

希望这有助于解决问题。

请您提供

联合收割机减速机

代码也？@VivekDoshi我添加了

const-AllBranch=useSelector（state=>state.BranchReducer）

您可以做

const-AllBranch=useSelector（state=>state.branchList）

。我不明白您为什么要调用

store.dispatch（BranchAction.fetchAllBranchList（））；

直接在组件内部？@nithishgandsiri我需要将数组列表加载到存储中，这就是我调用store.dispatch的原因，直接参考教程。作为reactive的开始，理想情况下，您应该在

useffect

中执行此操作，因为您正在使用

hooks

。在这里，当您加载组件时会发生什么nt，尝试更新状态（存储中），当状态更新时，组件将重新渲染，并再次尝试更新数据。因此，这将是一个无限循环。我使用了上述方法，可以获取数组，但无法将其映射到div。AllBranchList:[{branchID:1，createdBy:1，isActive:true，branchDetails:{branchDetailsID:1，}，{branchID:2，createdBy:1，isActive:true，branchDetails:{branchDetailsID:1，}]这是我的数组值。请对此提供帮助。您希望从列表中显示哪些详细信息？BranchHid、CreatedBy、branchDetailsID、BranchAddress。分支地址在分支详细信息对象中定义。通过考虑提供的json对象更新了答案。请检查