javascript - 如何在不使用 setState 的情况下显示 react-redux 状态值？

问题描述

这类问题之前已经得到解答，但我找不到适用于所有人的通用方法。这是状态值截图：

该值来自 node.js 作为

return res.send(available_balance);

动作设置为：

type: FETCH_DIGITAL_WALLET_BALANCE_BY_ID_SUCCESS,
digitalWalletUserAccountBalanceById: balance

如您所见，redux 商店毫无疑问地设置了正确的数据。

现在，当我将数据显示为：

class UserUpdateModal extends React.Component {
   constructor(props) {
    ...
   }
   render() {
          return ( 
             <div> 
              <h1>{this.props.initialValues.wallet_balance_by_id}</h1>
             </div>
          )
   }
}
function mapStateToProps (state) {
  return{
     initialValues: {
            wallet_balance_by_id: state.digitalWalletUserAccountBalanceById.data,
     }
  }
}
export default connect(
mapStateToProps,
)(withRouter(UserUpdateModal));

我得到错误：

但是当我创建时：

class UserUpdateModal extends React.Component{
this.state = {
    wallet_balance_by_id:'',
}
this.getWallet_balance_by_id = this.getWallet_balance_by_id.bind(this);
}

 getWallet_balance_by_id(){
    this.state.viewWalletBalance==false? 
    this.setState({viewWalletBalance:true}):this.setState({viewWalletBalance:false})
  }

....

}

然后调用该函数作为输入按钮，它设置状态并显示到屏幕上。那么，在不使用按钮解决问题的情况下，将 redux 状态值放到屏幕上的基本方法是什么。

<h2>Balance</h2>
                                
     <h1>{ this.state.viewWalletBalance ? 
     this.props.initialValues.wallet_balance_by_id : null }</h1>
     <input type="submit" value="Balance" onClick={this.getWallet_balance_by_id} />
     {/* <h1>{this.props.initialValues.wallet_balance_by_id}</h1> */}

标签： javascriptreactjsreduxreact-redux

如您所见，redux 商店毫无疑问地设置了正确的数据。

redux 存储最终会获得正确的值，但它并不总是具有正确的值。再次查看您发布的 Redux Dev Tools 屏幕截图。最终值为 a number 10.12。但最初该值为空object {}。为什么？

问题不在于您的组件代码或您在此处包含的任何代码。问题是 Redux 存储的初始状态，它将state.digitalWalletUserAccountBalanceById.data属性设置为空 object {}。修复初始状态，您的问题就会消失。它应该是一个number或undefined。

javascript - 如何在不使用 setState 的情况下显示 react-redux 状态值？

问题描述

解决方案

推荐阅读