React中的状态更改会重置输入字段和其他DOM元素

Question

我有一个过滤器栏，当您切换它时会展开。展开后，它将显示可以选择的过滤器项目列表，其想法是通过运行例如在屏幕上的某个位置显示选定的项目：

appliedFilterItems.map(filter => div {filter} div )

现在，每次选择过滤器时，过滤器栏都将重置为非扩展模式，并且显然，每次redux状态发生变化时，所有DOM元素都将重置为其原始类名称，而奇怪的是没有一个连接到还原状态。

我不知道是什么原因导致了DOM重置。

import React, { Component } from "react";
import shortid from "shortid";
// this is rendered inside AdminDashboard from Routes
export default class FilterOptions extends Component {
  applyFilter(e) {
    e.persist();
    const { actions } = this.props;
    actions.setFilterInState(e);
    actions.toggleFilter(e);
  }

  render() {
    const { filterOptions, appliedFilters, actions } = this.props;

    return (
      <div className="filter-wrapper">
        {appliedFilters.length ? (
          <div className="selected-filter-items-wrapper">
            <button onClick={() => actions.clearFilters()}>clear</button>
            {appliedFilters.map(filter => {
              return (
                <div className="selected-filter-item" key={shortid.generate()}>
                  {filter}
                </div>
              );
            })}
          </div>
        ) : (
          ""
        )}

        <div className="filter-options">
          {filterOptions.map(option => (
            <div
              onClick={e => this.applyFilter(e)}
              className="filter-option"
              key={shortid.generate()}
            >
              {option.name}
              <span className="filter-option-arrow-icon fa fa-chevron-down" />
              <div className="filter-option-list-container">
                {option.data.map(filterOption => (
                  <div className="filter-item" key={shortid.generate()}>
                    <input type="checkbox" className="filter-input" />
                    {filterOption}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }
}


--- REDUCER ----
import stateData from "../State";
import actionTypes from "../actionTypes";

const initState = () => {
  return { ...stateData, appliedFilters: [] };
};

const setFilterState = (filterValue, state) => {
  const appliedFilters = state.appliedFilters.slice();
  const filterItemIndex = appliedFilters.indexOf(filterValue);

  if (filterItemIndex === -1) {
    return { ...state, appliedFilters: appliedFilters.concat(filterValue) };
  }
  appliedFilters.splice(filterItemIndex, 1);
  return { ...state, appliedFilters };
};

export default function(state = initState(), action) {
  switch (action.type) {
    case actionTypes.TOGGLE_FILTER: {
      const event = action.payload;
      let filterOptionEl = event.target;

      if (filterOptionEl.classList.contains("filter-option-arrow-icon")) {
        filterOptionEl = filterOptionEl.parentNode;
      }

      if (filterOptionEl.classList.contains("filter-option")) {
        const iconEl = filterOptionEl.childNodes[1];
        const filterOptionsListContainerEl = filterOptionEl.childNodes[2];

        if (iconEl.classList.contains("fa-times")) {
          iconEl.className = "filter-option-arrow-icon fa fa-chevron-down";
        } else {
          iconEl.className = "filter-option-arrow-icon fa fa-times";
        }

        filterOptionEl.classList.toggle("active");
        filterOptionsListContainerEl.classList.toggle("active");

        /*         return {...state, filterOpen: !this.state.filterOpen}
         */
      }
      return state;
    }

    case actionTypes.SET_FILTER_IN_STATE: {
      const event = action.payload;
      const filterOptionEl = event.target;

      let filterValue = "";

      if (filterOptionEl.classList.contains("filter-item")) {
        filterOptionEl.firstChild.checked = !filterOptionEl.firstChild.checked;

        filterValue = filterOptionEl.textContent.replace(/\s/g, "");

        return setFilterState(filterValue, state);
      }

      if (filterOptionEl.classList.contains("filter-input")) {
        filterValue = filterOptionEl.nextSibling.wholeText.replace(/\s/g, "");
        return setFilterState(filterValue, state);
      }

      return state;
    }
}


----- ROUTES
import React, { Component } from "react";
import { HashRouter, Route, Switch } from "react-router-dom";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { createBrowserHistory } from "history";
import { state } from "./reducers/state";
import "./styles/app.scss";

import * as actions from "./actions";

import AdminDashboard from "./AdminDashboard";

const history = createBrowserHistory();

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actions, dispatch) };
}

@connect(
  state,
  mapDispatchToProps
)
class Routes extends Component {
  render() {
    const { productView, filterOpen } = this.props;

    return (
      <>
        <HashRouter basename="/">
            <div className="parent-view-container">
              <Switch>
                <Route
                  path="/pm/:id"
                  render={props => (
                    <AdminDashboard {...props} {...this.props} />
                  )}
                />
                />
              </Switch>
            </div>
        </HashRouter>
      </>
    );
  }
}

export default Routes;