Javascript React路由器：状态变量更新为setState未正确传递到路由

因此，我有以下问题： 我想允许用户设置我的投资组合的语言。为此，我在初始的

组件中为他们提供了两个链接，用于设置

的状态
埃斯科拉·修·西莫拉。
)
}
//组成部分
const Home=（道具）=>{
console.log（props.language）
返回(
)
}

---

加载

组件时，

console.log（props.language）

将

none

记录到控制台，这是

this.state.language

设置为的初始值。有人能给我解释一下为什么它不会更新，以及如何修复它吗？

您是否尝试过探索解决方案？您将拥有一个文件，在其中定义每种语言的键，并传递一个

i18n

对象来访问每个键。这是一种反模式，因为您试图使用多个组件来改变状态。

您是否尝试过探索解决方案？您将拥有一个文件，在其中定义每种语言的键，并传递一个

i18n

对象来访问每个键。这是一种反模式，因为您正试图使用多个组件来改变状态。

设置

window.location.href

将刷新页面。那将失去你所有的状态。更改

设置
窗口。location.href
将刷新页面。那将失去你所有的状态。更改您的
因为您使用的是
windows.location.href
而出现问题，它将刷新应用程序。之后，您将获得该应用程序的新实例，并且您将丢失该应用程序的状态。这也是您在控制台中获得初始状态的原因

将
windows.location.href
更改为
this.props.history.push（）
但要执行此操作，您需要使用“react router dom”中的
withRouter
HOC将
应用程序
组件包装为
withRouter
。我在某些地方更改了你的代码，请查看。并尝试使用
Link
标记而不是
a
标记

import { BrowserRouter , Route,  withRouter} from "react-router-dom";
.....

class App extends React.Component {
  constructor(props) {
      super(props)
      this.state = {
          language: "none"
      }
  }

  changeLanguage = event => {
      event.preventDefault()
      // react-router passes "history" as props
      this.setState({ language: event.target.id }, () => this.props.history.push('/home'))
  }

  render() {
      return (

          <div id="app">
            <Route
              exact
              path="/"
              render={() => (
                  <Language changeLanguage={this.changeLanguage} />
              )}
            />
            <Route
              path="/home"
              component={() => {
                  return <Home language={this.state.language} />
              }}
            />            
           </div>
      )
  }
}

// wrapping App component with "withRouter" HOC
const RouterApp = withRouter(App)

// <NewApp /> Component
// you need to do this because component wrapped inside
// "withRouter" HOC must be inside "Router" component
const NewApp = () => {
 return <BrowserRouter>
        <RouterApp />
  </BrowserRouter>
}

// <Language/> Component
const Language = props => {
  return (
      <div id="language">
          <h1>Choose your language.</h1>
          <div className="lang-options">
              <p
                  className="lang-link"
                  id="pt_BR"
                  onClick={props.changeLanguage}
                  title="Português Brasileiro"
              >
                  Português
              </p>
              <p
                  className="lang-link"
                  id="en_US"
                  onClick={props.changeLanguage}
                  title="American English"
              >
                  American
              </p>
          </div>
          <h1>Escolha seu idioma.</h1>
      </div>
  )
}   

// <Home Component/>
const Home = (props) => {
  console.log(props.language)
  return (
      <div id="home">
          Home Component
          <p>Language: {props.language}</p>
      </div>
  )
}

// render NewApp component
ReactDOM.render(<NewApp />, document.getElementById('root'));

从“react router dom”导入{BrowserRouter，Route，withRouter}；
.....
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
语言：“无”
}
}
changeLanguage=事件=>{
event.preventDefault（）
//react路由器将“历史”作为道具传递
this.setState（{language:event.target.id}，（）=>this.props.history.push（'/home'））
}
render（）{
返回(
(
)}
/>
{
返回
}}
/>            
)
}
}
//使用“withRouter”HOC包装应用程序组件
const RouterApp=带路由器（应用程序）
//组成部分
//您需要这样做，因为组件被包装在内部
//“withRouter”HOC必须位于“Router”组件内
const NewApp=（）=>{
返回
}
//组成部分
const Language=props=>{
返回(
选择你的语言。

葡萄牙


美国人

埃斯科拉·修·西莫拉。
)
}   
// 
const Home=（道具）=>{
console.log（props.language）
返回(
主分量
语言：{props.Language}

)
}
//呈现NewApp组件
ReactDOM.render（，document.getElementById（'root'））；
您遇到问题，因为您使用的是
windows.location.href
它将刷新应用程序。之后，您将获得该应用程序的新实例，并且您将丢失该应用程序的状态。这也是您在控制台中获得初始状态的原因

将
windows.location.href
更改为
this.props.history.push（）
但要执行此操作，您需要使用“react router dom”中的
withRouter
HOC将
应用程序
组件包装为
withRouter
。我在某些地方更改了你的代码，请查看。并尝试使用
Link
标记而不是
a
标记

import { BrowserRouter , Route,  withRouter} from "react-router-dom";
.....

class App extends React.Component {
  constructor(props) {
      super(props)
      this.state = {
          language: "none"
      }
  }

  changeLanguage = event => {
      event.preventDefault()
      // react-router passes "history" as props
      this.setState({ language: event.target.id }, () => this.props.history.push('/home'))
  }

  render() {
      return (

          <div id="app">
            <Route
              exact
              path="/"
              render={() => (
                  <Language changeLanguage={this.changeLanguage} />
              )}
            />
            <Route
              path="/home"
              component={() => {
                  return <Home language={this.state.language} />
              }}
            />            
           </div>
      )
  }
}

// wrapping App component with "withRouter" HOC
const RouterApp = withRouter(App)

// <NewApp /> Component
// you need to do this because component wrapped inside
// "withRouter" HOC must be inside "Router" component
const NewApp = () => {
 return <BrowserRouter>
        <RouterApp />
  </BrowserRouter>
}

// <Language/> Component
const Language = props => {
  return (
      <div id="language">
          <h1>Choose your language.</h1>
          <div className="lang-options">
              <p
                  className="lang-link"
                  id="pt_BR"
                  onClick={props.changeLanguage}
                  title="Português Brasileiro"
              >
                  Português
              </p>
              <p
                  className="lang-link"
                  id="en_US"
                  onClick={props.changeLanguage}
                  title="American English"
              >
                  American
              </p>
          </div>
          <h1>Escolha seu idioma.</h1>
      </div>
  )
}   

// <Home Component/>
const Home = (props) => {
  console.log(props.language)
  return (
      <div id="home">
          Home Component
          <p>Language: {props.language}</p>
      </div>
  )
}

// render NewApp component
ReactDOM.render(<NewApp />, document.getElementById('root'));

从“react router dom”导入{BrowserRouter，Route，withRouter}；
.....
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
语言：“无”
}
}
changeLanguage=事件=>{
event.preventDefault（）
//react路由器将“历史”作为道具传递
this.setState（{language:event.target.id}，（）=>this.props.history.push（'/home'））
}
render（）{
返回(
(
)}
/>
{
返回
}}
/>            
)
}
}
//使用“withRouter”HOC包装应用程序组件
const RouterApp=带路由器（应用程序）
//组成部分
//您需要这样做，因为组件被包装在内部
//“withRouter”HOC必须位于“Router”组件内
const NewApp=（）=>{
返回
}
//组成部分
const Language=props=>{
返回(
选择你的语言。

葡萄牙