Reactjs 使用redux更改组件中的状态

我使用reactjs和redux进行状态管理。我想用redux更改组件的状态。但是，当我向组件发送道具并使用console.log（）检查它时，返回的是未定义的。 请引导我解决问题。。。 谢谢

Svg查看器组件

import React, { useEffect, useState, useContext } from "react";
import * as d3 from "d3";
import store from "../../redux/store";

    const SvgViewer = ({ nodesData, svgFilePath, props }) => {
      //const { visible, invisible } = props;

      const [svgContainer, setSvgContainer] = useState(undefined);

      const showNodesOnSvg = nodes => {


        let svgDoc = svgContainer.contentDocument;
        let gTags = svgDoc.querySelectorAll("svg > g");
        let container = null;
        if (gTags.length > 1) container = svgDoc.querySelector("g:nth-of-type(2)");
        else container = svgDoc.querySelector("g:nth-of-type(1)");
        let node = d3.select(container);
        nodesData.forEach(nodeData => {
          node
            .append("text")
            .attr("id", "node" + nodeData["id"])
            .attr("fill", "white")
            .attr("text-anchor", "middle")
            .attr("x", nodeData["positionX"])
            .attr("y", nodeData["positionY"])
            .attr("class", "clickable-node")
            .style("font-size", "8px")
            .style("position", "absolute")
            .style("cursor", "pointer")
            .style("display", "inline-block")
            .on("click", function() {
              clickHandler(nodeData["id"]);
            })

            .text("N/A" + " " + nodeData["symbol"]);
          let nodeCreated = d3.select(
            svgDoc.getElementById("node" + nodeData["id"])
          );
          nodeCreated
            .append("title")
            .attr("id", "title" + nodeData["id"])
            .text(" " + nodeData["tagCode"]);
        });
      };
      const clickHandler = nodeID => {
        console.log(props); //not show props
      };
      useEffect(() => {
        const svg = document.querySelector("#svgobject");
        setSvgContainer(svg);
        svg.onload = () => {
          if (nodesData != null) {
            showNodesOnSvg();
          }
        };
      });

      return (
        <div className="unit-schema-container1" key={svgFilePath}>
          {/* <Spin indicator={objectLoading} spinning={this.state.objectLoading}> */}
          <object id="svgobject" type="image/svg+xml" data={svgFilePath}></object>
          {/* </Spin> */}
        </div>
      );
    };

    export default SvgViewer;

import React, { PureComponent } from "react";
import { Row, Col, Spin, Icon } from "antd";
import axios from "axios";
import "./tree-select.scss";
import History from "./history";
import SchemaTreeSelect from "./schema-tree-select";
import SvgViewer from "../../container/svgViewerContainer";


class UnitMonitor extends PureComponent {
  constructor() {
    super();
  }
  state = {
    nodes: undefined,
    nodeId: 25,
    valueSignalR: [],
    searchText: "",
    selectedChart: "Line",
    tsSchemaLoading: false,
    objectLoading: false,
    svgFilePath: ""
  };

  onChangeShcema = schemaID => {
    axios.get("/api/schemata/get-schemata-nodes/" + schemaID).then(response => {
      this.setState({ nodes: response.data });
      let path = response.data[0].file;
      let svgFile = require("./images/" + path);
      this.setState({ svgFilePath: svgFile });
    });
  };


  render() {
    return (
      <Row type="flex" className="">
        <Col span={25}>
          <SchemaTreeSelect handleChange={this.onChangeShcema} />
          <History nodeId={this.state.nodeId} />
          <SvgViewer
            svgFilePath={this.state.svgFilePath}
            nodesData={this.state.nodes}
          />
        </Col>
      </Row>
    );
  }
}

export default UnitMonitor;

减速器：

function modalReducer(state = initialState, action) {
const initialState = false;
  switch (action.type) {
    case "VISIBALE":
      return (state = true);
    case "INVISIBALE":
      return (state = false);
    default:
      return state;
  }
}

export default modalReducer;

行动

export function visible() {
  return {
    type: "VISIBLE"
  };
}

export function invisible() {
  return {
    type: "INVISIBLE"
  };
}

Svg容器

import { visible, invisible } from "../redux/actions/modalAction";
import { connect } from "react-redux";
import svgViewer from "../pages/unit-monitor/svg-viewer";

const mapStateToProps = state => ({
  visibale: state.value
});

const mapDispatchToProps = dispatch => {
  return {
    visible: () => dispatch(visible()),
    invisible: () => dispatch(invisible())
  };
};

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

Svg组件

import React, { useEffect, useState, useContext } from "react";
import * as d3 from "d3";
import store from "../../redux/store";

    const SvgViewer = ({ nodesData, svgFilePath, props }) => {
      //const { visible, invisible } = props;

      const [svgContainer, setSvgContainer] = useState(undefined);

      const showNodesOnSvg = nodes => {


        let svgDoc = svgContainer.contentDocument;
        let gTags = svgDoc.querySelectorAll("svg > g");
        let container = null;
        if (gTags.length > 1) container = svgDoc.querySelector("g:nth-of-type(2)");
        else container = svgDoc.querySelector("g:nth-of-type(1)");
        let node = d3.select(container);
        nodesData.forEach(nodeData => {
          node
            .append("text")
            .attr("id", "node" + nodeData["id"])
            .attr("fill", "white")
            .attr("text-anchor", "middle")
            .attr("x", nodeData["positionX"])
            .attr("y", nodeData["positionY"])
            .attr("class", "clickable-node")
            .style("font-size", "8px")
            .style("position", "absolute")
            .style("cursor", "pointer")
            .style("display", "inline-block")
            .on("click", function() {
              clickHandler(nodeData["id"]);
            })

            .text("N/A" + " " + nodeData["symbol"]);
          let nodeCreated = d3.select(
            svgDoc.getElementById("node" + nodeData["id"])
          );
          nodeCreated
            .append("title")
            .attr("id", "title" + nodeData["id"])
            .text(" " + nodeData["tagCode"]);
        });
      };
      const clickHandler = nodeID => {
        console.log(props); //not show props
      };
      useEffect(() => {
        const svg = document.querySelector("#svgobject");
        setSvgContainer(svg);
        svg.onload = () => {
          if (nodesData != null) {
            showNodesOnSvg();
          }
        };
      });

      return (
        <div className="unit-schema-container1" key={svgFilePath}>
          {/* <Spin indicator={objectLoading} spinning={this.state.objectLoading}> */}
          <object id="svgobject" type="image/svg+xml" data={svgFilePath}></object>
          {/* </Spin> */}
        </div>
      );
    };

    export default SvgViewer;

import React, { PureComponent } from "react";
import { Row, Col, Spin, Icon } from "antd";
import axios from "axios";
import "./tree-select.scss";
import History from "./history";
import SchemaTreeSelect from "./schema-tree-select";
import SvgViewer from "../../container/svgViewerContainer";


class UnitMonitor extends PureComponent {
  constructor() {
    super();
  }
  state = {
    nodes: undefined,
    nodeId: 25,
    valueSignalR: [],
    searchText: "",
    selectedChart: "Line",
    tsSchemaLoading: false,
    objectLoading: false,
    svgFilePath: ""
  };

  onChangeShcema = schemaID => {
    axios.get("/api/schemata/get-schemata-nodes/" + schemaID).then(response => {
      this.setState({ nodes: response.data });
      let path = response.data[0].file;
      let svgFile = require("./images/" + path);
      this.setState({ svgFilePath: svgFile });
    });
  };


  render() {
    return (
      <Row type="flex" className="">
        <Col span={25}>
          <SchemaTreeSelect handleChange={this.onChangeShcema} />
          <History nodeId={this.state.nodeId} />
          <SvgViewer
            svgFilePath={this.state.svgFilePath}
            nodesData={this.state.nodes}
          />
        </Col>
      </Row>
    );
  }
}

export default UnitMonitor;

import React，{PureComponent}来自“React”；
从“antd”导入{Row，Col，Spin，Icon}；
从“axios”导入axios；
导入“/tree select.scss”；
从“/History”导入历史记录；
从“/schema tree select”导入SchemaTreeSelect；
从“../../container/svgViewerContainer”导入SvgViewer；
类UnitMonitor扩展了PureComponent{
构造函数（）{
超级（）；
}
状态={
节点：未定义，
诺德：25岁，
估价师：[]，
搜索文本：“”，
selectedChart：“行”，
tsSchemaLoading:错误，
objectLoading:false，
svgFilePath:“
};
onChangeShcema=schemaID=>{
get（“/api/schemata/get schemata nodes/”+schemaID）。然后（响应=>{
this.setState（{nodes:response.data}）；
让path=response.data[0]。文件；
设svgFile=require（“./images/”+路径）；
this.setState（{svgFilePath:svgFile}）；
});
};
render（）{
返回(
);
}
}
导出默认单元监视器；

您正在尝试读取state上的

值

属性，但在reducer返回的state上没有此类属性。。。它只是

true

或

false

，因此在

MapStateTrops

中用状态本身替换state.value

const mapStateToProps = state => ({
  visibale: state
});

此外，用于在redux状态下分派操作的

类型

之间也存在不一致

---

“VISIBALE”/“Unvisible”

在reducer中使用，而

“VISIBLE”/“INVISIBLE”

在action dispatcher中使用。`

您的操作读取

不可见

，reducer读取

Unvisible

，与

MapStateTrops

中的另一个操作相同，该操作具有

未定义的state.value

，无

值

property@code_it_up感谢您的回答，我根据您的代码片段更改为，但仍然返回undefind@RohullahRajaeeRad有几件事你需要保持同步（或一致）。。。例如，减速器中

开关箱

中使用的类型必须与分派动作时使用的

类型

相匹配…因为我仍然可以看到可见与可见以及不可见与不可见的区别。我不认为除此之外还有其他原因。。。尽管如此，请随时发表评论。