Question

所以我有4个具有4种不同颜色的按钮和10个正方形，应该具有按钮上最后10次单击的颜色。

我映射到redux状态以显示正方形。我还将squareColors存储在localStorage中。

当我单击按钮时，状态会更新，因此我应该立即看到正方形的颜色变化。但是，仅在刷新页面时才会发生。单击按钮后，我的App.js组件不会重新呈现。

为什么？

App.js：

import React from 'react';
import { connect } from 'react-redux';
import { setColors } from './redux/actions';
import './App.css';
import CornerButton from './components/CornerButton';
import Square from './components/Square';

const styles = // some styles

class App extends React.Component {

  componentDidMount() {
    if (localStorage.getItem('lastTenColors')) {
      let squareColors = JSON.parse(localStorage.getItem('lastTenColors'));
      this.props.setColors(squareColors);
    } else {
      let squareColors = localStorage.setItem('lastTenColors',  JSON.stringify([...Array(10)]));
      this.props.setColors(squareColors);
    }
  }

  render() {
    return (
          <div style={styles.container}>
            <div style={styles.topRow}>
              <CornerButton color="red"/>
              <CornerButton color="blue"/>
            </div>
            <div style={styles.middleRow}>
              {this.props.squareColors.map((color, i) => <Square key={i} color={color}/>)}
            </div>
            <div style={styles.bottomRow}>
              <CornerButton color="cyan"/>
              <CornerButton color="green"/>
            </div>
          </div>
      );
  }
}

const mapDispatchToProps = { setColors }

const mapStateToProps = state => {
  return {
    squareColors: state.colors.squareColors
  }
}

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

CornerButton.js：

import React from 'react';
import { connect } from 'react-redux';
import {setColors} from '../redux/actions';

const styles = // some styles...

class CornerButton extends React.Component {

  updateSquaresColors = (color = null) => {
    let squareColors = this.props.squareColors;
    squareColors.unshift(color);
    squareColors.pop();
    this.props.setColors(squareColors);
    localStorage.setItem('lastTenColors',  JSON.stringify(squareColors))
  }


  render() {
    return (
      <button
      style={{...styles.button, color: this.props.color, borderColor: this.props.color}}
      onClick={() => this.updateSquaresColors(this.props.color)}>
        click me!
      </button>
    );
  }
}

const mapDispatchToProps = { setColors }

const mapStateToProps = state => {
  return {
    squareColors: state.colors.squareColors
  }
}

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

Square.js：

import React from 'react';

const styles = //some styles...

const Square = props => (
  <div style={{...styles.square, backgroundColor: props.color}}>
  </div>
);

export default Square;

动作和减速器：

//action
import { SET_COLORS } from "./actionTypes";


export const setColors = (squareColors = [...Array(10)]) => ({
  type: SET_COLORS,
  payload: {
    squareColors
  }
});

// reducer
const initialState = {
  squareColors: [...Array(10)]
};

export default function(state = initialState, action) {
  switch (action.type) {
    case SET_COLORS: {
      return {
        ...state,
        squareColors: action.payload.squareColors
      };
    }
    default:
      return state;
  }
}

Answer 1

我认为redux无法识别状态更改，因为对squareColors数组的引用保持不变，因此您必须传递此数组的副本，该副本将具有对setColors方法的新引用。

      updateSquaresColors = (color = null) => {
        let squareColors = this.props.squareColors;
        squareColors.unshift(color);
        squareColors.pop();
        this.props.setColors([...squareColors]); //changed
        localStorage.setItem('lastTenColors',  JSON.stringify(squareColors))
      }

尽管redux状态已更新，但组件不会重新呈现

1 个答案: