TypeError：元素不可迭代答案

【问题标题】：TypeError: elements is not iterableTypeError：元素不可迭代
【发布时间】：2021-11-05 07:51:24
【问题描述】：

我正在使用 Rect/Redux，我想将一个数组转换为一棵子树，就像这里解释的那样 Transform an array of connected elements to a tree 。当我想访问状态并登录到控制台时，connections 和 elements 数组都未定义。

动作

import {
  ADD_CONNECTION,
  ADD_ELEMENT,
  SAVE_DATA,
} from './types';
 
export const addElement = (node) => (dispatch) => {
  dispatch({
    type: ADD_ELEMENT,
    payload: node,
  });
};
 
export const addConnection = (edge) => (dispatch) => {
  dispatch({
    type: ADD_CONNECTION,
    payload: edge,
  });
};
 
export const saveData = (elements, connections) => (dispatch) => {
  const nodesWithoutEdges = [...elements].filter((e) => e.type);
  const map = new Map(
    nodesWithoutEdges.map((elt) => [elt.id, { ...elt, children: [] }])
  );
  for (const { source, target } of connections)
    map.get(source).children.push(map.get(target));
  //const tree = [...map.values()].filter(node => node.children.length);
  const tree = [...map.values()];
  const payload = JSON.stringify(tree);
 
  dispatch({
    type: SAVE_DATA,
    payload,
  });
};

减速器

import * as types from '../actions/types';
 
const initialState = {
  elements: [],
  connections: [],
  data: [],
  currentElement: undefined,
};
 
const flow = (state = initialState, action) => {
  switch (action.type) {
    case types.ADD_CONNECTION:
      return {
        ...state,
        connections: state.connections.concat(action.payload),
      };
    case types.ADD_ELEMENT:
      return {
        ...state,
        elements: state.elements.concat(action.payload),
      };
    case types.SAVE_DATA:
      return {
        ...state,
        data: action.payload,
      };
    default:
      return state;
  }
};
 
export default flow;

导航栏 CTA

import React from 'react';
 
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { saveData } from '../../redux/actions/flow';
 
const NavigationBar = ({ elements, connections, saveData }) => {
  const handleCLick = () => {
    console.log('elements: ', elements); // undefined
    console.log('connections: ', connections); // undefined
    saveData(elements, connections);
  };
 
  return (
    <>
      <Navbar>
              <Button
                onClick={() => handleCLick()}
              >
                Save
              </Button>
      </Navbar>
    </>
  );
};
 
NavigationBar.propTypes = {
  saveData: PropTypes.func.isRequired,
  elements: PropTypes.object.isRequired,
  connections: PropTypes.object.isRequired,
};
 
const mapStateToProps = (state) => ({
  elements: state.elements,
  connections: state.connections,
});
 
export default connect(mapStateToProps, { saveData })(NavigationBar);

【问题讨论】：

请将错误消息和随附信息以文本形式包含在文本中，而不是作为文本图片。
你有combineReducers吗？

标签： javascript arrays reactjs redux react-redux

【解决方案1】：

从您商店的附件图片中，我可以看到您有多个组合减速器

您的商店：

所以elements 在flow 减速器下，您首先需要访问该减速器以获取elements.

在你的Navbar CTA:

const mapStateToProps = (state) => ({
  elements: state.flow.elements,  //<-- Here access flow first
  connections: state.flow.connections,  //<-- Also here
});

【讨论】：