Javascript 反应组件道具不'；无法使用redux商店进行更新

Button.js组件

    import React from "react"
import "../styles/button.scss"
import store from "../index"

class Button extends React.Component {
    constructor(props) {
        super(props)
        this.buttonTextChanger()
    }

    buttonTextChanger() {
        this.buttonText = "MainPage" === this.props.state.page ? "Az adatokhoz" : "A főoldalra"
    }


    logger = (actualPage) => {
        this.props.onButtonClick(actualPage)
        console.log("state from store before textchange", store.getState())
        console.log("state from props before textchange", this.props.state)
        this.buttonTextChanger()
    }

    render() {
        return (
            <div id="container">
                <button className="learn-more" onClick = {() => this.logger(this.props.state.page)}>
                    <span className="circle" aria-hidden="true">
                    <span className="icon arrow"></span>
                    </span>
                    <span className="button-text">{this.buttonText}</span>
                </button>
            </div>
        )
    }
}

export default Button

按钮容器

import { connect } from "react-redux"
import Button from "../components/Button"
import changePage from "../actions/changePage"

const mapStateToProps = (state) => {
    console.log("az injectelt state", state)
    return {state}
} 

const mapDispatchToProps = (dispatch) => {
    return {
        onButtonClick : (page) => {
            switch (page) {
                case "MainPage":
                    dispatch(changePage("DataPage"))
                    break
                case "DataPage":
                    dispatch(changePage("MainPage"))
                    break
                default:
                    dispatch(changePage("MainPage"))
            }
        }
    }
}

const ChangePageContainer = connect(mapStateToProps, mapDispatchToProps)(Button)

export default ChangePageContainer

但是我想从render函数中提取buttonextchanger（）函数调用，并在单击时调用它

TLDR： 问题是：

logger = (actualPage) => {
  console.log("prop state value before dispatch", this.props.state)
  console.log("store value before dispatch", store.getState())
  this.props.onButtonClick(actualPage)
  console.log("prop state value after dispatch", this.props.state)
  console.log("store value after dispatch", store.getState())
}

mapStateToProps函数中还有一个console.log，用于查看传递给props的状态。 这将产生：

prop state value before dispatch {page: "MainPage"}
store value before dispatch {page: "MainPage"}
state when mapStateToProps function called {page: "DataPage"}
store value after dispatch {page: "DataPage"}
prop state value after dispatch {page: "MainPage"}

---

所以道具不会被更新。

那么，你就不知道为什么

这个.props.state

即使在呼叫调度程序后也不会更新了

你看,， Redux完全建立在函数式编程的基础上，现在有了钩子，React也完全向函数式编程发展，甚至连JavaScript最初都是作为函数式编程构建的

与OOP完全不同的一件事，也是最酷的一件事是，函数式编程中没有突变。没有。香草Redux是完全FP，只有纯功能-功能没有副作用。这就是为什么您需要Redux Saga或其他库来进行API调用-非纯函数

切入正题

logger=（实际页面）=>{
//这里,，
//actualPage=>新值
//this.props.state=>旧值
//在整个职能过程中，他们都将保持这种状态
log（“分派前的prop state值”，this.props.state）
console.log（“分派前存储值”，store.getState（））
this.props.onButtonClick（实际页面）
//即使你更新了Redux商店，
//'this.props.state'仍将保留旧值
//因为这个值不会被改变
log（“分派后的prop state值”，this.props.state）
console.log（“分派后存储值”，store.getState（））
}

那么关于

store.getState（）

，它们的值会被更新，您可能会问

注意它不是

store.getState

，而是

store.getState（）

？是的，它是一个函数而不是一个值。无论何时调用它们，它们都返回最新的值，并且没有任何突变。在您的情况下，在分派操作后第二次调用时，您将获得最新的值。这不是变异，

store.getState（）

只是获取了最新的值并返回给您<代码>记录器（）将在第一次调用结束后获取新值，然后循环再次重复

动作调度器将从旧的

状态创建一个新的
状态
，这就是为什么您可以在Redux开发工具中进行时间旅行

再次重述

logger=（实际页面）=>{
//旧价值
log（“分派前的prop state值”，this.props.state）
//旧价值
console.log（“分派前存储值”，store.getState（））
//新价值
this.props.onButtonClick（实际页面）
//现在，redux将使用新值进行更新
//但仍然是旧的价值-没有变异
log（“分派后的prop state值”，this.props.state）
//新价值
console.log（“分派后存储值”，store.getState（））
}
那么，你就不明白为什么
这个.props.state
即使在呼叫调度程序后也没有更新

你看,，
Redux完全建立在函数式编程的基础上，现在有了钩子，React也完全向函数式编程发展，甚至连JavaScript最初都是作为函数式编程构建的

与OOP完全不同的一件事，也是最酷的一件事是，函数式编程中没有突变。没有。香草Redux是完全FP，只有纯功能-功能没有副作用。这就是为什么您需要Redux Saga或其他库来进行API调用-非纯函数

切入正题

logger=（实际页面）=>{
//这里,，
//actualPage=>新值
//this.props.state=>旧值
//在整个职能过程中，他们都将保持这种状态
log（“分派前的prop state值”，this.props.state）
console.log（“分派前存储值”，store.getState（））
this.props.onButtonClick（实际页面）
//即使你更新了Redux商店，
//'this.props.state'仍将保留旧值
//因为这个值不会被改变
log（“分派后的prop state值”，this.props.state）
console.log（“分派后存储值”，store.getState（））
}

那么关于
store.getState（）
，它们的值会被更新，您可能会问

注意它不是
store.getState
，而是
store.getState（）
？是的，它是一个函数而不是一个值。无论何时调用它们，它们都返回最新的值，并且没有任何突变。在您的情况下，在分派操作后第二次调用时，您将获得最新的值。这不是变异，
store.getState（）
只是获取了最新的值并返回给您<代码>记录器（）

将在第一次调用结束后获取新值，然后循环再次重复

动作调度器将从旧的

状态创建一个新的
状态
，这就是为什么您可以在Redux开发工具中进行时间旅行

再次重述

logger=（实际页面）=>{
//旧价值
log（“分派前的prop state值”，this.props.state）
//旧价值
console.log（“分派前存储值”，store.getState（））
//新价值
this.props.onButtonClick（实际页面）
//现在，redux将使用新值进行更新
//但仍然是旧的价值-没有变异
log（“分派后的prop state值”，this.props.state）
//新价值
console.log（“分派后存储值”，store.getState（））
}
你也可以发布你的减速机功能吗？为此，你需要使用ComponentWillReceivePropso，基本上你需要使用你正在更新的数据来存储吗？是的，我更新了这个问题，所以它包含了更多信息。你也可以发布你的减速机功能吗
logger = (actualPage) => {
  console.log("prop state value before dispatch", this.props.state)
  console.log("store value before dispatch", store.getState())
  this.props.onButtonClick(actualPage)
  console.log("prop state value after dispatch", this.props.state)
  console.log("store value after dispatch", store.getState())
}

prop state value before dispatch {page: "MainPage"}
store value before dispatch {page: "MainPage"}
state when mapStateToProps function called {page: "DataPage"}
store value after dispatch {page: "DataPage"}
prop state value after dispatch {page: "MainPage"}