时间戳

首页 > 解决方案 > State ValueChange 无法重新渲染组件

javascript - State ValueChange 无法重新渲染组件

问题描述

我编写了以下代码来更新从全局状态传递到组件的数组，但即使在控制台日志中实现了更新的值，我也无法重新渲染屏幕以显示更新的值。这些值正在更新或删除，当您单击删除按钮时，您应该删除数组中的倒数第二个元素。

import React, { Component } from "react";
import { render } from "react-dom";
import { createStore, combineReducers } from "redux";
import { connect, Provider } from "react-redux";
import "./style.css";

const countReducer = (state = { count: [1, 2, 4, 3] }, action) => {
  switch (action.type) {
    case "INC":
      const newState = { ...state };
      console.log("Initial State: ", newState);
      const valueToBeAdded = newState.count[newState.count.length - 1] + 1;
      console.log("valueToBeAdded", valueToBeAdded);
      const lastElement = newState.count[newState.count.length - 1];
      console.log("lastElement", lastElement);
      newState.count.push(valueToBeAdded);
      console.log("count", state.count);
      return newState;
    case "DEC":
      const newState = { ...state };
      const valueToBeDeleted = newState.count[state.count.length - 2];
      console.log("valueToBeDeleted", valueToBeDeleted);
      newState.count.splice(newState.count.length - 2, 1);
      console.log("state.count: ", newState.count);
      return newState;
    default:
      return state;
  }
};

const reducers = combineReducers({
  counter: countReducer
});

const actions = {
  inc: () => ({ type: "INC" }),
  dec: () => ({ type: "DEC" })
};

const store = createStore(reducers);

class App extends Component {
  render() {
    console.log(this.props, actions);
    console.log("count", this.props.count);
    return (
      <div>
        <button onClick={this.props.inc}>Update</button>
        <button onClick={this.props.dec}>Delete</button>
        <div>Value: {this.props.count.join(",")}</div>
      </div>
    );
  }
}

const mapStateToProps = ({ counter }) => {
  return { count: counter.count };
};

const AppContainer = connect(
  mapStateToProps,
  actions
)(App);

render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById("root")
);

标签： javascriptreactjsreact-nativereduxreact-redux

解决方案

由于您没有自己的状态，并且始终默认为[1,2,3,4]并且因为您想对其进行变异；将它分配给另一个变量并对其进行变异是行不通的。您可以使用lodash's cloneDeep 来保留状态副本并改变您的新状态并作为新状态返回。

您只需要更改减速器中的两行。

  1. 从 lodash 导入 util。import cloneDeep from "lodash/cloneDeep";
  2. 将出现的const newState = { ...state };in INC 和 DEC 动作替换为const newState = cloneDeep(state);

推荐阅读