gpt4 book ai didi

javascript - react 终极版 : Getting Props And Updating State

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:40:19 25 4
gpt4 key购买 nike

我是第一次尝试 React/Redux/JS。我对在组件中设置状态还是让 redux 更新它有点困惑。

我想单击一个按钮将 lightOn 设置为 true 并显示更新后的 this.props.lightOn 值。我缺少一些基本但不确定是什么的东西。

行动:

export const setLight = lightStatus => dispatch => {
const res = lightStatus;
console.log(res); // => true on click

dispatch({ type: SET_LIGHT, payload: res });
};

在组件中,{this.props.onLight} 未定义,所以我没有正确更新状态:

import React, { Component } from 'react';
import { connect } from 'react-redux';
//import * as actions from '../actions';
import { setLight } from '../actions';
import { bindActionCreators } from 'redux';

class Light extends Component {
render() {

return (
<div>
Light Status: {this.props.lightOn}
<button
className="btn"
onClick={() => this.props.setLight(true)}
>
Set Light!
</button>
</div>
);
}
}

function mapStateToProps(state) {
return {
lightOn: state.lightOn
};
}

function mapDispatchToProps(dispatch) {
//whenever selectBook is called the result should be passed to all of our reducers
return bindActionCreators({ setLight: setLight }, dispatch);
}

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

reducer(使用扩展运算符更新):

import { SET_LIGHT } from '../actions/types';

export default function(state = [], action) {
switch (action.type) {
case SET_LIGHT:
return { ...state, lightOn: action.payload };
default:
return state;
}
}

最佳答案

如何将其设置为状态而不是直接传递给函数?首先将其绑定(bind)到 Constructor 中,然后单击 setState 为 true?

constructor(props) {
super(props);
this.state:{lightOn: false};
this.OnClick = this.OnClick.bind(this);
}

onClick(event) {
this.setState({lightOn: true});
}

onClick ={this.onClick()}

当你使用 redux 时,你可以通过返回一个新的状态来做到这一点

   return {...state, action.payload };

关于javascript - react 终极版 : Getting Props And Updating State,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47115233/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com