时间戳

首页 > 解决方案 > 使用 redux 更改组件中的状态

reactjs - 使用 redux 更改组件中的状态

问题描述

我正在使用带有 redux 的 reactjs 进行状态管理。我想用 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 { createStore, combineReducers } from "redux";
import modalReducer from "./reducers/modalReducer";

const store = createStore(modalReducer);

export default store;

减速器：

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, { 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;

标签： reactjsredux

解决方案

您正在尝试读取valuestate 上的属性，但是 reducer 返回的 state 上没有这样的属性......它只是将truestate.valuefalse替换为您的mapStateToProps.

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

type此外，用于在 redux 状态上调度操作的 s之间也存在不一致。

"VISIBALE"/ "UNVISIBALE"用于减速器，而"VISIBLE"/ "INVISIBLE"用于动作调度程序。`

推荐阅读