React redux 不会更新类组件的状态答案

【问题标题】：React redux won't update class component's stateReact redux 不会更新类组件的状态
【发布时间】：2020-08-14 15:20:54
【问题描述】：

如果使用 redux 更改了另一个组件的状态，我有一个组件应该更新，但事实并非如此。

在 mapStateToProps 内部，redux 操作会返回正确的值。

import React, {Component} from "react";
import './DashboardContent.scss';
import * as entries from '../../../assets/demo.json';

import CategoryHeader from "./CategoryHeader/CategoryHeader";
import NoContent from "../../../shared/NoContent/NoContent";
import UnsortedList from "./UnsortedList/UnsortedList";
import {connect} from "react-redux";

class DashboardContent extends Component {

    state = {
        activeCategory: this.props.activeCategory
    };

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log(this.props.activeCategory)
    }

    render() {
        return (
            <div>
               ...
            </div>
        )
    }

}

const mapStateToProps = state => {
    console.log(state);
    return {
        activeCategory: state.category
    }
};

export default connect(mapStateToProps)(DashboardContent);

在另一个组件内部调度 - 当它被执行时，第一个组件的状态 activeCategory 将变为 some value：

dispatch(changeCategory('some value'))

Actions.js

// Action types
const CHANGE_CATEGORY = 'CHANGE_CATEGORY'


// Action creators
export const changeCategory = (category) => {
    return {
        type: CHANGE_CATEGORY,
        category
    }
}

减速器.js

const initialState = {
  activeCategory: 'all'
};

export const reducer = (state = initialState, action) => {
    console.log('reducer', state, action);
    if (action.type === 'CHANGE_CATEGORY') {
        return action.category
    }
    return state;
};

【问题讨论】：

componentDidUpdate 中的console.log 是否显示新值？
将它添加到主类时会发生什么：(class DashboardContent extends Component) { constructor() { super();这个.props = 0; }
目前您只将状态的初始值设置为props.activeCategory。使用componentDidUpdate 来检查新的道具并更新那里的状态，或者使用getDerivedStateFromProps 代替，目的相同。
@pawel 不，很遗憾没有。
@kbo componentDidUpdate 在 redux 状态更新时不会运行。

标签： javascript reactjs redux react-redux

【解决方案1】：

你的 reducer 应该返回更新后的状态，而不是返回 action.category atm。

export const reducer = (state = initialState, action) => {
  console.log('reducer', state, action);
  if (action.type === 'CHANGE_CATEGORY') {
   return {...state,category:action.category}; 
  }
  return state;
};

【讨论】：

这会返回mapStateToProps 内部的一个对象，这很好，但我仍然无法从组件内部访问它。
mapStateToProps 中的console.log(state) 是否显示状态中更新后的类别。如果是这样，您应该可以使用 this.props.activeCategory 访问它。
是的，但我无法访问它，这很奇怪。 const store = createStore(reducer) - 这就是我使用来自react-redux的Provider 初始化它的方式
那你说你不能在组件内部访问它是什么意思。 componentDidUpdate 日志中的 console.log(this.props.activeCategory) 是什么？
什么都没有 - componentDidUpdate 甚至不会运行，并且在 JSX 中渲染 this.props.activeCategory 也不会打印任何东西。

【解决方案2】：

当你将它添加到主类时会发生什么？（类 DashboardContent 扩展组件）我相信当您尝试访问 this.props.activeCategory 时，您需要这样做。尝试添加这个sn-p。

 constructor(props) { 
 super(props); 
 this.state = this.props.activeCategory;
 }

你可以参考这个答案：What's the difference between "super()" and "super(props)" in React when using es6 classes?

【讨论】：

不知何故我仍然无法将数据从 redux 获取到我的组件。
你是如何在代码中渲染它的？你能把 JSX 贴在这里吗？

【解决方案3】：

当你将一个组件连接到 redux 时，第二个参数是 dispatchToProps，这是你可以在你的组件中 dispatch 一个 action 的唯一方法

export default connect(mapStateToProps, {action1, action2,})(DashboardContent);

【讨论】：