Question

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

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")
);

Answer 1

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

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

从lodash导入实用程序。 import cloneDeep from "lodash/cloneDeep";
用const newState = { ...state };替换INC和DEC动作中const newState = cloneDeep(state);的出现

状态ValueChange无法重新呈现组件

1 个答案: